Continuing the theme of the previous post about the validation I would like to note that validation using HTML 5 is nice, but it does not solve some problems. If you look at the source http://www.w3schools.com/tags/att_input_type.asp you may note that the input tag has a validation for almost all the fields that can be used in the forms. However, there is no drop-down list. This problem can be solved using javascript and I’ll show you how to do this in this post.
First, I will do a simple form, it will have several fields of different types to compare usability of HTML 5 and JavaScript. The script will check that the user has entered all the necessary data before you send data to a server.
The page contains a JavaScript function called validate form (). It checks the form filling. Let’s look first at the form.
THE FORM
The first part of the form – tag “form”
<FORM name="contact_form" method="post" action="dumb.htm" onsubmit="return validate_form ( );">
The form has a contact_form name. With it, we will get access to the form from JavaScript validation function.
Form uses postmetod to send data to the htm-file stub, which simply displays a message.
Also, the form tag contains onsubmit attribute to call JavaScript validate_form function () when button “Done!” is pressed. The function returns a Boolean value, for which the true means “test is successful,” and false – “data is delayed.” So we can prevent sending data if the user has not filled it in correctly.
The rest of the code adds the fields to the form:
<H1>Please fill in the form:</H1> <P>Name: <INPUT type="text" name="contact_name"></P> <P>Gender: <INPUT type="radio" name="gender" value="Male"> Male <INPUT type="radio" name="gender" value="Female"> Female</P> <P>Age: <SELECT name="age"> <OPTION value="">Select:</OPTION> <OPTION value="0-18 years">0-18 years</OPTION> <OPTION value="18-30 years">18-30 years</OPTION> <OPTION value="30-45 years">30-45 years</OPTION> <OPTION value="45-60 years">45-60 years</OPTION> <OPTION value="60+ years">60+ years</OPTION> </SELECT> </P> <P>Do you accept terms of use? <INPUT type="checkbox" name="terms" value="Yes"> Yes</P> <P><INPUT type="submit" name="send" value="Done!"></P> </FORM>
validate_form() FUNCTION
The function validate_form() that validates the form is built into the head section at the beginning of the page:
<SCRIPT type="text/javascript">
The first line (<script type=”text/javascript”>) tells browser that the JavaScript code goes after.
function validate_form ( ){ valid = true;
Next, validate form () function code starts and set the variable valid to true. We use a valid variable for determining the correctness of filling the form. If at least one check does not pass, we will set to false and the form will not be sent.
The next five lines checking the field value contact_name to be filled.
If the field is empty, the user will be warned by a message box, and the value of the variable will be set to false.
if ( document.contact_form.contact_name.value == "" ){
alert ( "Please, enter your name." );
valid = false;}
After checking the text field contact_name radio button gender is checked. This code checks for at least one radio button has been pressed. If it is not pressed (checked == false), the user is a will get message and the variable valid will be set to false.
else {
if ( ( document.contact_form.gender[0].checked == false ) && ( document.contact_form.gender[1].checked == false ) ){
alert ( "Please, choose your gender" );
valid = false;}
Then, we check dropdown list Age, whether the user has selected something od not. JavaScript function can check which option is selected when the form is processed. If you choose the first option, we know that the user has not selected the actual age, and the message about this will be issued to a user:
else {
if ( document.contact_form.age.selectedIndex == 0 )
{alert ( "Please, choose your age.");
valid = false;}
At the end of the checkbox terms is checked. We want user to agree to the terms of the agreement, so you need to be sure that he has shown his agreement:
else {
if ( document.contact_form.terms.checked == false )
{alert ( “Please, accept terms of use” );
valid = false;}
Closing all the necessary brackets, return the value of our variable event handler onSubmit (as discussed above). If it’s set to true – the form is sent to the server, if false – the form is not sent.
} } } return valid;}>< /SCRIPT>
Since we set the variable valid to false in any of the above cases, if at least one violation occurs, the form data will not be sent to the server. If the user has not filled in more than one field, he will see a message box for each blank field. To make this principle work properly and to make user not see too many repeated alerts, the system is implemented with the code checking system (using conditions), if the first field is not filled, a message will be displayed, if it is filled, we will start to check the next field and so on.
Download the file with the code and try it yourself, you can next:
Good luck in your work with validation! I hope the basic principles of its became clear to you 🙂
