Generally, JavaScript is preferred technology for form validations on client side. Writing form in HTML and validating forms using JavaScript really sucks. We’ll have to check two piece of codes when any run-time errors are found. Swapping between the codes would kill your patience. HTML5 doesn’t need JavaScript for validations on client side as the new input types are introduced for validations with it.
In HTML5 the <input> tag has the ability to validate the information in the form. If it validates, proceeds to the submission and if it doesn’t, shows errors.
Let’s see the form validation in both conventional(HTML+JavaScript) and new(HTML5) ways.
Validating forms with HTML+JavaScript:
HTML Form:
<!DOCTYPE html>
<html>
<body>
<form name="myForm">Quantity (between 1 and 5):
<input max="5" min="1" value="11" name="quantity">
<input type="submit" value="Submit Query"></form>
</body>
</html>
JavaScript:<html>
<body>
<form name="myForm">Quantity (between 1 and 5):
<input max="5" min="1" value="11" name="quantity">
<input type="submit" value="Submit Query"></form>
</body>
</html>
<script>
if(document.myForm.quantity.checkValidity() === false){ alert('fail'); } </script>
if(document.myForm.quantity.checkValidity() === false){ alert('fail'); } </script>
The above script will check the ‘quantity’ field and validates the input given in it. When the value is greater than 5, the trigger will be fired. This type of validation is a good practice if only some fields are to be validated in a form. Let us suppose we have 30 fields to be validated. Writing 30 validation lines of code isn’t necessary and it is a worst practice of coding.
You can simply write the following script that does validation of all form fields:
<script>
if(document.myForm.checkValidity() === false){ alert('fail'); }
</script>
if(document.myForm.checkValidity() === false){ alert('fail'); }
</script>
‘myForm’ is the name of the form and it is enough to validate the fields.
Validating forms in HTML5:
Validation criteria in HTML5 is quite different and simpler than before. There is no need to use JavaScript for every small validation of the input fields. Some new ‘input’ tag attributes were introduced with HTML5. They take care of input field validations very well.The required attribute:
The required attribute can be simply added to the input tag at the end. When the form filler misses out the field, a pop up notifies about that mandatory field to be filled.For e.g.,
<input type="number" name="quantity" min="1" max="5" required/>
The ‘min’ and ‘max’ attributes see if the value entered is with in the range. If the out of range value is entered, it shows validation error.
The pattern attribute:
The pattern attribute is pretty slick, and is for people who write regular expressions. If you write a regular expression to the pattern attribute, your input will validate against the pattern in order to have the return value true.For e.g.,
<input type="text" name="quantity" pattern="[0-5]{1}" />
Notice that the type was changed to text in order for the pattern to make the input invalid; we need to remove the number type, as that will supersede the validation criteria. If the type and pattern conflict (by requiring results that exclude each other), the validation criteria will never be met, and the form will never validate.
The measurable attributes:
Some input types have comparative criteria such as email, which require a strict input pattern. Other input types have attributes such as min and max that must be satisfied before the input can be considered valid. Let’s look at our first input example again:
<form name="myForm">
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5" />
<input type="submit" />
</form>
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5" />
<input type="submit" />
</form>
In this case the number that is input must meet the min and max criteria in order to be considered valid. For example, the number 11 would not validate but the number 4 would validate. In a similar manner we have the email type:
<form name="myForm">
Enter Your Email: <input type="email" name="myEmail" />
<input type="submit" />
</form>
Enter Your Email: <input type="email" name="myEmail" />
<input type="submit" />
</form>
The email type looks for a value that meets traditional email criteria that would match a regular expression such as this:
var emailTest = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
If the value of the input doesn’t have a username, an at sign (@), and a domain, it’s considered invalid.
That's all for now! till next time! keep visiting amfastech.com
Post a Comment