The below sample shows how to perform a FORM validation for an HTML 5 input element using the newly introduced "Validity" property associated to an input element. This will also demonstrate the usage of checkValidity() function which can be used to identify whether the the form elements are all validated to proceed with the server communication.
Skill level: For Beginners
Sample Code:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>HTML5 Sample Validation Page</title>
<style type="text/css">
body
{
font-family:Arial;
font-size:12px;
}
.valid
{
color:#000000;
}
.invalid
{
color:#FF0000;
}
</style>
</head>
<body>
<form id="form1" method="post">
<label>Age: <input type="number" required="true" value="50" min="18" max="60" step="1" oninput="validate(this)"> (between 18 and 60)</label><br /><br />
<div id="validateMsg"></div><br />
<div id="validity"></div>
<script>
function validate(input) {
var out = document.getElementById('validateMsg');
if (input.validity) {
if (input.validity.valid === true) {
out.innerHTML = "<span class='valid'>" + input.value +
" is a valid age.</span>";
} else {
out.innerHTML = "<span class='invalid'>" + input.value +
" is not valid age.</span>";
}
}
document.getElementById('validity').innerHTML = "checkValidity() output: <span class='invalid'>" + input.checkValidity() + "</span>";
}
</script>
</form>
</body>
</html>
Concept:
The input element is a number element (that accepts "Age") in this example, with maximum and minimum values set in the design mode. [If more information is needed on the Input elements, refer here.] During the user input event, a JavaScript function validate() is called. This function validates the input value using the input.validity.valid property and provides appropriate message, after checking for the support of this functionality.
checkValidity() function is called to check and understand the value that it returns for the successful and unsuccessful validation scenarios.
Here are the output screens:
Valid Input:
Invalid Input:
As you can see, the checkValidity() always seems to return false. It returns true for values less than 10. It is being suspected that the inadequate browser support is one reason behind this weird behavior OR i'm missing something. However, as per the documentation here, this function will help us to check and trigger functions based on the invalid/valid state of one/multiple elements, thereby assisting us in form validations.
In the above code, the script tag is provided inside the body tag, for the sake of easy understanding. Keep it inside the HEAD tag, as it is usually done.
