Virtual Open Schooling Online courses available at Virtual Open Schooling (VOS), for more details kindly click here!
NIOS Silver Jubilee Year
NIOS

Window Object

From NIOS
Jump to: navigation, search
Previous Page Home Page Next Page
ICT Applications


The window object is a top level object in the JavaScript object model. It is also defaultobject i.e. the statement document.write(“Hello! Welcome to JavaScript World”) isactually expanded as window.document.write(“Hello! Welcome to JavaScript World”) bythe JavaScript interpreter.

event handling

Form Validation with JavaScript

Form validation is the process of checking that a form has been filled in correctly beforeit is processed. This section covers you how to create a JavaScript-enabled form thatchecks whether a user has filled in the form correctly before it's sent to the server.First of all we should know why form validation is a useful thing, and then build up asimple example form. For example, if your form has a box for the user to type their emailaddress, you might want your form handler to check that they've filled in their addressbefore you deal with the rest of the form.

event handling

Let's build a simple form with a validation script. The form will include one text fieldcalled Your Name, and a submit button. Our validation script will ensure that the userenters their name before the form is sent to the server.

A following example showing form validation with JavaScript

event handling

You can see that the page consists of a JavaScript function called validate_form ( ) thatperforms the form validation, followed by the form itself. Let's look at the form first.

The form

The first part of the form is the form tag:

<form name="contact_form" method="post"
action="http://www.nios.ac.in/contact.asp" onSubmit="return validate_form ( );">
The form is given a name of "contact_form". This is so that we can reference the form by name from our JavaScript validation function.

The form uses the post method to send the data off to a sever side script onwww.nios.ac.in server (assumption)thanks the user that . In reality, you would ofcourse send the data to your own server side script JSP, ASP page, etc.Finally, the form tag includes an onSubmit attribute to call our JavaScript validationfunction, validate_form ( ), when the Send Details button is pressed. The returnallows us to return the value true or false from our function to the browser, where truemeans "carry on and send the form to the server", and false means "don't send theform". This means that we can prevent the form from being sent if the user hasn'tfilled it in properly. The rest of the form prompts the user to enter their name into a form field calledcontact name, and adds a Send Details submit button:
<h1>Please Enter Your Name</h1>
<p>Your Name: <input type="text" name="contact_name"></p>
<p><input type="submit" name="send" value="Send Details"></p>
</form>
Now let's take a look at the JavaScript form validation function that does the actual workof checking our form.

The validate_form ( ) function

The form validation function, validate_form ( ), is embedded in the head tag near thetop of the page:
<SCRIPT language="JavaScript">
function validate_form ( )
{
valid = true;( ) function, then set a variable called valid to the value true:We use this valid variable to keep track of whether our form has been filled out correctly.If one of our checks fails, we'll set valid to false so that the form won't be sent.The next 5 lines check the value of our contact_name field to make sure it has beenfilled in: if ( document.contact_form.contact_name.value == "" )
{
alert ( "Please fill in the 'Your Name' box." );
valid = false;

}
If the field is empty, the user is warned with an alert box, and the variable valid is set tofalse.

Next, we return the value of our valid variable to the onSubmit attribute (describedabove). If the value is true then the form will be sent to the server; if it's false then theform will not be sent: return valid;
Finally, we finish our validate_form ( ) function with a closing brace, and end ourHTML comment and script tag:
}
</SCRIPT>


Previous Page Home Page Next Page
ICT Applications