Form Validating
Now lets do something practical using all the knowledge we just acquired. Lets see how to create a form and then validate it. Please note that JavaScript cannot be used to save form result in websites - one would have to use a server side language - like Perl - to do that. Now lets us study the below form. Enter some info into it and we will see how javascript will validate it. The essential elements are marked with a *. After you clicked the submit button, the results will appear in the results textarea.
Want to create a similar effect in your site? Here is the code...
function validator() {
//First we check for errors.
var flag = 0;
var errors = "";
//If a name is not specified, show an error
if (document.frm.name.value=="") {
flag++;
errors = errors + "Name\n";
}
//Show error if age is not a number or if is not between 5 and 100
var age = document.frm.age.value;
if (age < 5 || age > 100 || !age.match("^[0-9]+$") ) {
flag++;
errors = errors + "Age\n";
}
//Check if email is a valid E-mail id.
var id = document.frm.email.value;
//The regular expression for a valid e-mail address
var re = /^.+\@.+\..{2,4}$/gi;
if(!id.match(re)) { //If it is NOT a match
flag++;
errors = errors + "E-Mail\n";
}
//Dispay an error message if there was any error
if(flag > 0) {
alert("Errors were found in these elements.\n"+
errors+"\nPlease re-enter these elements.");
return 0; //Exit the function if error is there
}
//Show the results
//Create a text with all the personal details
var data = "Personal Details\n----------------\nName : "+
document.frm.name.value +"\nAge : "+age +
"\nOccupation : "+document.frm.job.value +
"\nE-Mail : " + id;
if (document.frm.sex[0].checked) data = data + "\nGender : Male";
else data = data + "\nGender : Female";
var langs = "";
if(document.frm.html.checked) langs = langs + "HTML, ";
if(document.frm.javascript.checked) langs = langs + "JavaScript, ";
if(document.frm.english.checked) langs = langs + "English, ";
if(document.frm.perl.checked) langs = langs + "Perl, ";
if(document.frm.monkey.checked) langs = langs + "Monkey Talk.";
if (langs != "") data = data + "\n\n"+ document.frm.name.value
+" knows the following languages...\n" + langs;
//Display the details in the result area
document.frm.result.value = data;
return true;
}
I have added many comments so that you can understand the code without further explanation. To see the code that I used to create the form, view the source of this page.
In the above example I have used a 'button' type element as the Submit button - but when creating forms that will pass the values to a server side script you will have to use a 'submit' type element. Like this...
<input type="submit" value="Submit" />
When using the 'onclick' property with this, you will notice that the form is submitted even if there is a error. If you want to stop that, use the following method.
<script language="Javascript" type="text/javascript">
<!--
function validate() {
//Check for error
//...
//The function will return a false value if there is an error
if(error) {
alert("Sorry! Some error was found");
return false;
}
return true;
//-->
</script>
<form action="server_script.cgi" method="post" onsubmit="return validate();">
Enter Data <input name="" type="text" value="" /><br />
<input type="submit" value="Submit" />
</form>
See the 'onsubmit' statement? This will execute the 'validate()' function when the user submits the form. The browser will submit the form if and ONLY if the function will return a true value. So if any validation error was spotted in the function, return a false value and the browser will stay on the same page. If there is no error, the function will return true value. This will cause the browser to submit the form and the user will be taken to the page in the 'action' attribute of the form.
If you wish to try something, use the below form.
blog comments powered by Disqus