Weekly new JavaScript technique: technique 3

Validating forms

Try to submit the above form. Notice that it can't be submitted if one of the fields is left blank. Only if all the fields are filled in, it will be submitted to the e-mail address you provided when the page was loading.
If you have a form on your page, wouldn't you like to prevent it from being submitted if its clue fields aren't filled in, or are obviously filled in incorrectly?
This week you will learn how to do that. Let's see the source of the above example:

Here you can also see the sintax of JavaScript language: && is logical AND operator, || is logical OR operator and ! is logical NOT operator. != means different from whereas == means the same as. Blocks are enclosed within { and }. Generally, if you know C, you shouldn't have any problem understanding it.

More complex examples

Now we'll have a form where the user submits his/her date of birth in a specific format and his/her e-mail address. When the user submits the form, the script will prevent the form from being submitted if specific terms are not met: e-mail must have characters '@', '.' and must not have any blanks ' '; the given date format must be met. The source of the above example: <script languge="JavaScript">  </script> <form name="form2" method="post" action="your mailing cgi-script" onSubmit="return testForm2()"> E-mail address: <input name=e_mail size=40> Date of birth: <i>mm/dd/yyyy</i> <input name=birth_date size=10> <input type="submit" value="Submit"> <input name="MAIL" value="your@email.here" type="hidden"> <input name="SUBJECT" value="Weekly new JavaScript technique: example 2" type="hidden"> </form> Here, the function testForm2(), that actually validates the form, consists of a set of if statements which check possible irregularities. If an irregularity is found an alert dialog box pops up, focus is given (this doesn't work in Internet Explorer 3.0 for unknown reasons) to the object which contains irregular data, and, by returning false, the form submission is canceled. If no irregularities are found, the function returns true and the form is submitted.
Firstly, we assign the values of the input fields to the variables bd and em. Both of these varibles now represent strings entered in the corresponding input fields by the user. If at least one of them is an empty string the function terminates. Otherwise, the function execution continues. The em variable is now checked. The function terminates if em has less than 8 characters, if '.' or '@' are not found (indexOf(char, start) is a method of the string object which returns the index of the first occurence of the specified character within the string; first character has index 0 and last stringName.length-1; if the character is not found the method returns -1; second argument can be passed to this method representing the index location of the string to start the search from) or if empty space ' ' is found. After that, the bd variable is checked. It is acceptable only if it has exactly 10 characters and if '/' is found at second and fifth location. If these string variables have passed all the above checks, numeric variables mm, dd and yyyy are created representing month, day and year, respectively. parseInt(string, radix) converts the string argument to an integer of the specified radix and returns that integer. The substring(A, B) method returns string variable containing characters from index A inclusive, to index B exclusive of the string object. If parseInt(string, radix) cannot succesfully convert a string to a number, on some systems it returns NaN, and on some 0. Thus, in the next check, the execution of the function testForm2() is stopped if mm or dd or yyyy equals to 0, or if any of these variables is NaN, which is checked with the isNaN(variable) function that returns true if its argument is NaN. After that, few more checks are performed with the variables mm, dd and yyyy and if everything is OK the function returns true which lets the form submit.

One more example this week:

In this example, when the user sumbits the form, it is being checked whether an option is selected and whether a radio button is checked. If not, the form is not submitted. Here is the source: <script language="JavaScript">  </script> <form name="form3" method="post" action="your mailing cgi-script" onSubmit="return testForm3()"> How old are you: <select name="years"> <option> <option value="0-20">less than 20 <option value="20-40">20 - 40 <option value="40-60">40 - 60 <option value="60-">more than 60 </select> <br><br> You live in: <br><input name="continent" type="radio" value="America">America <br><input name="continent" type="radio" value="Europe">Europe <br><input name="continent" type="radio" value="Australia">Australia <br><input name="continent" type="radio" value="Asia">Asia <br><input name="continent" type="radio" value="Africa">Africa <br><br><input type="submit" value="Submit"> <input type="reset" value=" Clear "> <input name="MAIL" value="your@email.here" type="hidden"> <input name="SUBJECT" value="Weekly new JavaScript technique: example 3" type="hidden"> </form> The only new things here are the selectedIndex property of the select object which is an integer specifying the index of the selected option in a select object, for loop that looks just like in other C-like languages ( for(init; condition; increment) { statements; } ) and the checked property of the radio object which is a boolean value specifying whether a radio-button is checked.

This page hosted by . Get your own Free Home Page