Cara Membuat Validasi Form Menggunakan HTML dan Javascript

0
57

Cara Membuat Validasi Form Menggunakan HTML dan Javascript

Membuat Validasi Form Submit dengan Javascript merupakan sebuah usaha dan cara untuk menghalau kesalahan user saat melakukan input data melalui form HTML ke database.

Dengan menggunakan validasi Javascript kita dapat meminimalisir kesalahan penginputan dari sebuah form, bahkan kita juga dapat memberikan aturan mana yang boleh diisi dan mana yang boleh dikosongkan saat melakukan submit form dengan menampilkan pesan pop-up.

Terdapat banyak jenis validasi yang bisa dimanfaatkan untuk meminimalisir kesalahan dan kelalaian input dari seorang user ketika menggunakan sebuah aplikasi, adapun yang akan saya uraikan disini hanyalah sebuah contoh kecil dari sekian banyak validasi menggunakan javascript yang sering diterapkan oleh developer pada aplikasi berbasis website.

Validasi Form dengan HTML

Untuk menerapkan validasi submit pada sebuah form dengan menggunakan HTML hal pertama yang perlu disiapkan adalah menciptakan form terlebih dahulu, berikut adalah contoh sebuah form sederhana dengan menerapkan validasi HTML.

<form>
<div class="form-group"><label for="exampleInputEmail1">Email address</label>
<input id="email" class="form-control" name="email" required="" type="email" placeholder="Enter email" /></div>
<div class="form-group"><label for="exampleInputPassword1">Password</label>
<input id="password" class="form-control" name="password" required="" type="password" placeholder="Password" /></div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>

Penerapan validasi menggunakan teknik HTML agar form tidak boleh kosong pada form tersebut adalah dengan menerapkan atribute reuired, validasi ini akan mencegah form kosong saat tombol submit ditekan, kita juga dapat menerapkan minimal panjang karakter dengan menambahkan atribute minlength=”10″ ataupun maksimal panjand karakter dengan menambahkan atribute maxlength=”20″.

Validasi Form onSubmit dengan Javascript

Selain menerapkan atribute pada form HTML, validasi dapat dilakukan dengan Javascript, melakukan validasi dengan javascript untuk mencegah form kosong ketika user menekan submit dapat dilakukan seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contoh Form Validation</title>    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <form action="" method="POST" onSubmit="return cek_kelengkapan_form();">
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" name="email" id="email" placeholder="Enter email">   
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" name="password" id="password" placeholder="Password">
        </div>  
        <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
<!-- code javascriptnya -->
<script>
    function cek_kelengkapan_form()
    {
        var a = $("#email").val();
        var b = $("#password").val();
        if(a==''){
            alert('Email tidak boleh kosong');
            return false;
        }
        if(a==''){
            alert('Password tidak boleh kosong');
            return false;
        }
    }
</script>
</body>
</html>

Validasi diatas dilakukan dengan menangkap value pada atribut id pada sebuah input text pada sebuah form, jika valuenya kosong maka akan ditampilkan pesan pop-up, adapun pesan yang ditampilkan adalah apa yang kita isikan pada alert.

Nah diatas adalah sebuah contoh sederhana ketika melakukan validasi form untuk mencegah kekosongan data saat user melakukan submit, semoga tutorial yang simple ini dapat menambah wawasan serta memberi manfaat, terimakasih telah berkunjung di Jogjatech.com and happy coding 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here