| |
| Overview |
| |
In this chapter you will learn :
- About Form object
- Properties and Methods of Form object.
- Empty Fields Validation
- Email Validation
- Validating Credit Card
|
Forms
For a website to be interactive, it is necessary to capture user input and then process it. So, 'Form' is usually used for this purpose. The Form object allows you to access elements of a form. This is actually a property of the document object. An array of form objects is created, one for each <FORM> in the document. The interactive elements specified in an HTML form consist of buttons, checkboxes, radio buttons, reset and submit buttons. Various properties and methods of the form object are :
Properties of Form Object
| Property |
Description |
| action |
It specifies the URL address of the server program where the form is to be submitted. |
| elements |
It is an array of fields representing an object for each element on the form. |
| encoding |
It specifies the MIME encoding for the form data. It provides access to the enctype attribute of the <FORM> tag. The default encoding of the form is "application/x-www-form-urlencoded". |
| length |
It specifies the number of elements defined in the form. |
| method |
This is a read or write string that specifies how the data in the form is submitted to the server. The two methods available are 'GET' and 'POST'. By default, it returns 'GET'. |
| name |
It specifies the name of the form. |
| target |
It specifies the target window or frame name where the responses are sent to, after submission of a form. |
Methods of Form Object
| Method |
Description |
| reset( ) |
This method is used to reset the form elements. |
| submit( ) |
This method is used to submit a form. |
Now, when a user fills a form, that means the user enters text in the text fields or textarea, or checks checkboxes, clicks buttons (such as submit, reset, radio buttons or any other normal buttons) etc., form event handlers respond to these events. Event handlers then take action according to the type of data or further can download a new page from the server, and in case the data is inconsistent with the type, can prompt user to enter the correct data, such as in name field no digits can be put or for the phone number you cannot enter alphabets or putting a simple check that minimum length of a password should be more than six characters etc. So, you can easily validate what your visitors enter into fields on your form both when they enter the field itself and immediately before they submit the form.
Empty Fields Validation
In the JavaScript Form validation, it is checked to see no fields should remain blank. The following script verifies that text has been entered into the box.. Using if statement, the text field name is compared with empty string. If this field is equal to the empty string then an alert box will be displayed with appropriate message and focus is set to this field.
| Example |
<Script Language = "JavaScript" type = "text/javascript" >
function formvalid()
{
if ( form.field1.value = = " ")
{
alert ("Please don't leave the fields empty ");
form.feild1.focus ( );
return false;
}
}
|
E-mail Validation
For the email field, you should check if '@' and '.' characters are provided or not. If they are provided, then they should be at right position. If they are not provided, alert message should be displayed and the focus should be set to this field.
| Example |
<SCRIPT Language = "JavaScript" type = "text/javascript" >
function emailvalid (form)
{
var email = formcheck.email.value
var posat = value.indexOf( "@");
var posdot =value.lastindexOf(".");
var poslast=value.length-1;
if (email == (post <1 || posdot-posat< 2 || poslast-posdot >3|| poslast-posdot < 2) )
{
alert (" Enter Valid email address");
form.check.email.focus( );
return false;
}
return true;
} |
Credit Card Validation
With the help of JavaScript, a credit card number can be validated. But it is not possible to check that the given credit card number belongs to him/her or it has been issued to anyone else. Various computations are done on the card to check its validity, such as:
- Check all credit card numbers are numeric.
- The first digit is always predefined .(Prefix for Visa card : 4; Master card : 51-55; American express : 34-37)
- Fixed lengths of the card number, for example: 13 digits for Diners club, 15 for American express, and 16 for others.
- Use of 'Luhn' algorithm, that does a kind of checksum on the card number.
The 'Luhn' algorithm ( also called the Luhn formula), is better known as Modula10 or Mod 10, which tells you that the number applied, is valid or not. To understand, how this formula works, take an example, using credit card number 5122813678912121:
Step 1 : Double the alternate digits starting from the first digit. Therefore double the digits which are highlighted in 5122813678912121. Hence,
(5+5) , (2+2) , (8+8) , (3+3) , (7+7) , (9+9) , (2+2) , (2+2) gives
10 4 16 6 14 18 4 4
Step 2 : Take the results of the doubling and add all of them to have single value
Hence we have, 10 + 4 + 16 + 6 + 14 + 18 + 4 + 4 = 76
Step3 : Now add all the non-doubled digits from the credit card number
Hence result after addition is, 1 +2 + 1 + 6 + 8 + 1 + 1 = 21
Step 4 : Add the values calculated in step 2 and step 3 together.
Therefore, 76 + 21 = 97
Step 5 : Take the value calculated in step 4 and calculate the remainder when it is divided by 10. If the remainder is zero, then it's a valid number, otherwise it's invalid.
In our example : 97 % 10 = 7 So, our example number is not a valid card number, as the remainder is not 0. Now we understand how it works, let's look at the code :
|
