Consectatio Excellentiae

Whilst constructing any form you will need to validate the data that the user has input, and alert the user to any incorrect entries made.

The quickest way to validate the data is using Javascript on the client-side (i.e. browser). This enables you to check what has been entered without the need of sending any data to your webserver.

If you set up a basic form like below:

<form action="js-basic-validation.html" method="post" onsubmit="return validateForm(this)">
Text 1: <input name="text_1" type="text" value="" /><br>
Select 1: <select name="select_1">
 <option value="">Select</option>
 <option value="1">1</option>
 <option value="2">2</option>
 </select><br>
<input type="submit" name="submit" value="Submit" />
</form>

Then add the javascript between the <head> tags:

<script type="text/javascript">

function validateForm(form){
 if(form.text_1.value == ""){
 alert('You must complete \"Text 1\" field');
 form.text_1.focus();
 return (false);
 }
 if(form.select_1.value == ""){
 alert('You must select an option in \"Select 1\" field');
 form.select_1.focus();
 return (false);
 }
}

</script>

When you submit the form without any values entered/selected you will be alerted via a alert box that you haven’t entered any value to the form elements.

We can now break this script down to see how to it works!

The first significant part is the event that will call the Javascript function,  in this case onsubmit. This triggers the function to start,  also you will notice the return command, this enables us to stop the form being submitted if the criteria is not matched.

<form ... onsubmit="return validateForm(this)">

Leave a Reply