Client-page validation of form

Unknown Data · 1 Client-page validation of form Thu Sep 23, 2010 8:06 pm

Unknown Data

Registered Member

Posts : 833
Points : 254
Age : 28
Location : Denmark
Browser : Safari

Client-page validation of form
Work with Javascript and forms

You surely know how to validate a formfield, because many websites got forms. When you then want to press the button, will there sometime shows a PopUp box up, with the text, that you've forgot to fill something out.

Something like that is what we are going to look at in this tutorial - how to make a client-page validation with Javascript.

Why is it important to validate?
The concept with validation, is controlling the data and "read" if it's valid. And that's very important. Otherwise could the system not read/use userdata (etc) for anything than just writin it.

Some validation of forms could mean many money, fx order- and contactforms, and that would be vex significantly if we lose data like that.

How works it?
The principle of a client-page validation, is that you insert a small script, mostly javascript on the HTML page containing the form. When the user submits the form, activates the script, which chek form's fields through before the result is sent to the server. The validation is therefore entirely at the user's PC (Client) - client-page validation.

How do we do it?
Imagine you a normal form with with to name attributes.

Code:: <form action="" method="post"> Your Name : <input type="text" name="username"> Your Email : <input type="text" name="email"> <input type="submit" value="Send"> </form>

And lets imagine then, that we wish the person to fill out the "username" field.

At this point, do we use a special little script that checks if the field is filled out. If it isn't, will the person recieve a little message.
The script could look like this

Code:: <script type="text/javascript"> function validation() { error = 0; if((document.forms[0].username.value=='') && (error==0)) { alert('Remember to fill out the username field!'); document.forms[0].username.focus(); error = 1; } if(error == 0) document.forms[0].submit(); } </script>

The script can shortly be explained like this:
- The variable "error" is putted to 0.
- The content of the field "Username" is investigated - if it's empty will the variable "error" be puttted to 0, and the person recieve a alertbox with a alert.
- At the end is the investigate the script the variable of "error", but only if it's putted to 0 will the form be submitted.

We could probably write the script shorter - but we chose this building because it is smart wehn you later reach connection to several fields, and thus will it validate multiple fields simultaneously.

As you probably noticed is the script built up as a function named validate (). The last we need is just to call the functions, when the form is submitted - which will be done in this way:

Code:: <form action="" method="post" onsubmit="validation();return false;">

And thus do we got out first client-page validation.

How to validation multiaple fields
Once you have understood to validate one field, it is quite simple to add more fields. We simply just inserts another condition of the new field in our Javascript function.

Below have we added a textbox named "email" to our Javaacript function.

Code:: <script type="text/javascript"> function validation() { error = 0; if((document.forms[0].username.value=='') && (error==0)) { alert('Remember to fill out the username field!'); document.forms[0].username.focus(); error = 1; } if((document.forms[0].email.value=='') && (error==0)) { alert('Remember to fill out the email field!'); document.forms[0].email.focus(); error = 1; } if(error == 0) document.forms[0].submit(); } </script>

Similarly can you add any number of fields to the function - all you need to remember is that the name of the fields should be edited.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

Quick Menu

Quick Menu

1 Client-page validation of form Thu Sep 23, 2010 8:06 pm

Unknown Data