Custom Validasi Input HTML5 Mengunakan Javascript

Assalamualakum wr. wb...

HTML merupakan bagian penting dari pembangunan halaman web, Namun jika hanya mengunakan HTML saja web kita menjadi kurang menarik dan terlihat monoton, untuk itu kita perlu melakukan integrasi antara HTML dan Javascript untuk membuat halamn web menjadi lebih dinamis.

Ada banyak plugin Javascript yang bisa kita gunakan secara gratis, tetapi disini kita akan mengunakan Default javascript (bawaan browser)

Sekarang kita akan menguakan Validasi pada input form HTML. Sebenarnya validasi ini sudah ada pada HTML 5 Kita tinggal mengunakan saja. Tetapi validasi bawaan kadang kurang informatif terutama dari segi bahasa yang digunakan.

contoh penguakan validasi bawaan HTML5

Alert seperti ini bisa kita buat hanya menambahkan atribut requered saja pada komponent HTML
contoh code :

<input maxlength="50" minlength="4" required="" size="25" type="text" />

hampir setiap komponent HTML memiliki atribut ini, jika kamu sudah merasa cukup dengan pesan peringatan ini berarti tidak perlu menambah code lagi.Tapi jika Pesan peringatan ini dirasa pasih kurang cukup maka kamu bisa melakukan modifikasi mengunakan Javascript.
langkahnya sebagai beriut :
Tambahkan tag javascript pada bagian code, contoh disini saya mengukana input type Email


        <script>
            function invalidMsg(textbox){
                if(textbox.value==''){
                    textbox.setCustomValidity('Email Wajib Diisi');
                }else if(textbox.validity.typeMismatch){
                    textbox.setCustomValidity("Email Salah");
                }else{
                    textbox.setCustomValidity("");
                }
                return true;
            }
        </script>

Baca Juga :

Kemudian pada bagian input type kita panggil function javascript yang sudah kita buat tadi, cara panggilnya kita gunakan action type yang dimiliki atribut. Contohnya disini atribut input type Email yaitu oninput dan oninvalid. Jika kita lihat codenya menjadi seperti berikut

 <input oninput="invalidMsg(this)" oninvalid="invalidMsg(this)" type="email" id="email" name="email" required="">

Jika kita tulis code lengkapnya sebagai berikut :


<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <table>
                <tr>
                    <td>Email</td>
                    <td><input oninput="invalidMsg(this)" oninvalid="invalidMsg(this)" type="email" id="email" name="email" required=""></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit"</td>
                </tr>
            </table>
        </form>
        <script>
            function invalidMsg(textbox){
                if(textbox.value==''){
                    textbox.setCustomValidity('Email Wajib Diisi');
                }else if(textbox.validity.typeMismatch){
                    textbox.setCustomValidity("Email Salah");
                }else{
                    textbox.setCustomValidity("");
                }
                return true;
            }
        </script>
    </body>
</html>

Sekarang kita coba untuk test validasiny, kita tidak masukan apapun dan tekan tomnbol submit. maka akan muncul pesan peringatan Email Wajib Diisi

Selanjutnya kita akan coba dengan memasukan text bukan email, maka akan muncul pesan peringatan Email Salah

Kemudian kita coba input sesuai format email yaitu ada a keong ( @) dan tanda dot ( . ) contoh asep@pojokcode.com. Ketika kita melakukan input dengan benar barulah kita bisa melakukan submit form dan tidak menerima pesan peringatan.

Kira-kira seperti itu mudah mudahan ada manfaatnya, silahkan dikembangan sesuai dengan kebutuhan kamu..

Terima kasih

Baca Juga:

Untuk lebih jelasnya silahkan simak vidio dibawah ini: