1. Form Validation with JavaScript
HTML5 form validation can be done with JavaScript. The collaboration of both can produce a more interactive form, where an empty fieldName will display a warning message if the fieldName is empty or contains inappropriate characters, thus preventing any form of error in the form before it is submitted.
Creating HTML5 Form Validation With JavaScript
Source code:
<!DOCTYPE html>
<html>
<!-- gatewan.com -->
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Nama Wajib Diisi !");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
Nama : <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>Demo:
2. Form Validation with HTML5
Validation of HTML forms can be done automatically by the browser. So, if the fieldName is still empty and you press the submit button, a warning PopUp will appear to prevent errors or omissions.
Source code:
<!DOCTYPE html>
<html>
<body>
<!-- gatewan.com -->
<form action="demo_form.asp" method="post">
Nama : <input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
<p>Jika Anda klik submit, tanpa mengisi kolom teks,
browser Anda akan menampilkan pesan kesalahan.</p>
</body>
</html>Demo:
3. Data Validation
Data validation is the process of ensuring that the input to the computer is clean, correct and useful.
The characteristics of validation tasks are:
- The user has filled in all the required fields
- User has entered a valid date
- Prevent users from entering text in numeric fields.
- Most often, the purpose of data validation is to ensure correct input according to predetermined criteria.
- Validation can be defined by many different methods, and deployed in many different ways.
- Validation on the server is done by the web server, after the input is sent to the server.
- Validation on the client is done by the Browser, before the input is sent to the server.
4. HTML Constraint Validation
HTML5 introduces a new HTML validation concept called constraint validation. HTML constraint validation is based on:
- Constraint validation HTML Input Attributes
- Constraint validation CSS Pseudo Selectors
- Constraint validation DOM Properties and Methods
Constraint Validation HTML Input Attributes
| Attribute | Description |
|-----------|----------------------------------------------------|
| disabled | Menentukan bahwa elemen input harus dinonaktifkan |
| max | Menentukan nilai maksimum dari sebuah elemen input |
| min | Menentukan nilai minimum dari elemen input |
| pattern | Menentukan pola nilai suatu elemen input |
| required | Mewajibkan pada kolom elemen input |
| type | Menentukan jenis elemen input |Constraint Validation CSS Pseudo Selectors
| Selector | Description |
|-----------|-----------------------------------------------------------------------------------|
| :disabled | Memilih elemen input dengan spesifikasi atribut "disabled" |
| :invalid | Memilih elemen input dengan spesifikasi atribut invalid values |
| :optional | Memilih elemen input dengan spesifikasi atribut no "required" attribute specified |
| :required | Memilih elemen input dengan spesifikasi atribut "required" attribute specified |
| :valid | Memilih elemen input dengan spesifikasi atribut valid values |Constraint Validation DOM Methods
| Property | Description |
|---------------------|-------------------------------------------------------------------------|
| checkValidity() | Mengembalikan nilai “true” jika sebuah input element berisi data valid. |
| setCustomValidity() | Sets merupakan properti validationMessage input element. |Netizens
- Edited
Thank you sis for making this article, with this I can learn how to validate HTML5 forms with JavaScript.
Keep up your enthusiasm to create other useful articles.
Let me introduce myself, my name is Cindy Carolin,
visit my campus website at this link