Membuat Forms Validasi Dengan Form.reportValidity() Pada HTML 5.1
Di panduan kali ini sahabat akan belajar diantara fitur terbaru yang terdapat di HTML 5.1 membangun forms validasi dengan form.reportValidity() Di HTML 5.1 dan juga source codenya.
Hallo semuanya kembali lagi di artikel Source Code Aplikasi , bagi sebelumnya saya telah membahas mengenai Diantara fitur HTML 5.1 terbaru dan kini saya masih akan membahas mengenai fitur terbaru dari HTML 5.1 yaitu membangun forms validasi dengan form.reportValidity() Di HTML 5.1.
Kegunaan dari validasi ini yaitu apabila kalau form kosong tak ada value nya karenanya akan muncul tanda bahwa forms tersebut kosong atau belum di isi, yang jadi pertanyaan yaitu kan telah ada atribute required bikin handle itu ? nah bedanya dengan yang kini yaitu yaitu selaku berikut.
Sebelum melihat bedanya silahkan salin code berikut dan jalankan di browser :
<!DOCTYPE html>
<html lang=en>
<head>
<title>Bootstrap Example</title>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<style>
body {
font-family: 'Roboto';
color: #333;
}
form {
margin-bottom: 10px;
padding: 6px;
width: 380px;
background: #f3f3f3;
}
input {
width: 180px;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Form validation</h2>
<form>
<label>
Mandatory input <input type=text name=first-name required />
</label>
<button type=submit>Submit</button>
</form>
<script>
document.querySelector('form').reportValidity();
</script>
</body>
</html>
Setelah dijalankan hasilnya akan seperti ini :
Setelah kita lihat karenanya kita akan tau bedanya, bedanya kalau gunakan report.validity() yaitu dikala kita membuka pertamakali tanpa ada isi dari text-field dari form tersebut karenanya akan memberikan mark up atau tanda merah yang menandakan form tersebut pada keadaan kosong, sementara required hanya akan muncul dikala tombol submit di tekan. karenanya kesimpulannya keduanya antara atribut required dan report.validity() akan komplit kalau di gabungkan bagi membangun validasi.
Oke teman-teman mungkin dari saya itu saja mengenai membangun forms validasi dengan form.reportValidity() Di HTML 5.1 , hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
