The ES6 JavaScript brings the validation of user inputs. Validation is a process of checking whether the information given by the front-end user is correct according to the requirements or not, generally, the checking process is done at the server side and sends the validation information to the front-end user, which was not only a waste of execution time but also users time. JavaScript provides a way to validate the form’s data on the front end itself before sending it to the server side. Form validation generally performs two types of validations.
- Basic Validation: It is a process of checking whether all the required field data are filled or not.
- Data Format Validation: It is a process of checking the correctness of the given data, for example, whether the given Pincode contains 6 digits or not or whether Gmail contains @ or not.
Syntax:
<script>
function function(){
//validation code
}
</script>
<form action="redirect page" name="name of form" onsubmit="return function()">
<!--form-->
</form>Parameters: There are three parameters required when you design a form to get any information from the user.
- action=”redirect page”: It redirects to the next page when the given information is accurate.
- onsubmit=”return function()”: It calls the validation function, when the submit button is clicked, “return function()” when the function() returns true, it redirects the execution to action, if false it redirects execution again to submit in a loop.
- name=”name of form”: With the help of name we access the values from the form.
Example:
<script>
function validateBasic() {
var x = document.Basic.name.value;
if (x == "") {
document.getElementById("d1").innerHTML =
"Name must be filled out.";
return false;
//(optional)by default functions return is true
return true;
}
}
</script>
<h1 style="color:green;">Geeksforgeeks</h1>
<h4>ES6 validation</h4>
<!-- action store in local storage --><form name="Basic" action="#" onsubmit="return validateBasic()">
Name:
<input type="text" name="name">
<input type="submit" value="Submit">
</form>
<p id="d1"></p>
|
Output:
ES6 Validation
Data Format Validation: It is a process of checking whether all the required fields are filled, according to the requirements are not.
Example:
<script>
function validateData() {
//Basic check whether the username is filled or not.
if (document.Form.name.value == "") {
alert("Provide your name!");
document.Form.name.focus();
return false;
}
//checks whether the username is less than or
//equal to 8 characters or not
if (document.Form.name.value.length > 8) {
alert("Username should be utmost 8 characters!");
document.Form.name.focus();
return false;
}
//Checks whether the dropdown is selected or not.
if (document.Form.Galaxy.value == "-1") {
alert("Provide your Galaxy!");
return false;
}
//Checks whether the dropdown is selected or not.
if (document.Form.Guardian.value == "-1") {
alert("Provide your Favorite Guardian!");
return false;
}
}
</script>
<center>
<h1 style="color:green">Favorite Guardian Voting</h1>
<form action="#" name="Form" onsubmit="return validateData()">
<table cellspacing="0" cellpadding="3" border="1">
<tr>
<td align="center">Username</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td align="center">From Galaxy</td>
<td>
<select name="Galaxy">
<option value="-1" selected>choose yours</option>
<option value="1">Milky Way</option>
<option value="2">Andromeda</option>
<option value="3">Whirlpool</option>
</select>
</td>
</tr>
<tr>
<td align="center">Favorite Guardian</td>
<td>
<select name="Guardian">
<option value="-1" selected>choose yours</option>
<option value="1">Quill</option>
<option value="2">Groot</option>
<option value="3">Rocket</option>
<option value="4">Drax</option>
<option value="5">Gamora</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</center>
|
Output:
ES6 Validation
We have a complete list of Javascript ES6 features, to check those please go through this Introduction to ES6 article.
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.