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
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 :
<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
Kira-kira seperti itu mudah mudahan ada manfaatnya, silahkan dikembangan sesuai dengan kebutuhan kamu..
Terima kasih
Baca Juga:
- Fullcalendar Integrasi Dengan Bootstrap PHP dan MariaDB
- Template Toko Online Dengan Bootstrap
- Tree Menu Dinamis Dengan PHP MySQL dan JSTree
- Edit Jasper Report Dengan Ireport Plugin Netbeans
