The HTML5 allows you to customize an input tag. The HTML input tag can be modified to allow custom validation in a more streamlined way when compared to old approach.
Let us examine how custom validation worked with the older versions of the HTML. We will take simple Social Security validation input form element and try to apply validation so that only letters can be inserted into our input form tag.
Old way of validating SS form’s input tag:
<script>
function
checkSSN(value) {
var checkVal = ^\d{3}-\d{2}-\d{4}$;
if (!checkVal.test(value)) {
return false; }
return true;
}
</script>
<form onsubmit="if (checkSSN(this.SSN.value))
{ alert(this.SSN.value + ' SSN # is valid'); } else { alert(this.SSN.value + ' SSN
# is not valid'); }">
<input type="text"
size="15" name="SSN" />
</form>
The HTML5 custom input validation can be implemented in simpler way and less coding. The new HTML5 input tag
The HTML custom type has new attribute called "patter". We can associate regular expression from the above code with this attribute and the HTML5 framework will take care of all the extra processing that we had to do ourselves with the help of JavaScript.
Let us rewrite the above HTML custom validation of the input tag in HTML5
<input
type="text" name="ssn" pattern="(^\d{3}-\d{2}-\d{4}$)"/>
We are able to accomplish SS number validation with less code and very clear fashion. This code is easy to read and understand for someone who is going to support it after original developer leaves.