Javascript is used to validate forms, display information in text box or when
button is clicked, and other nice activities. Form validation means checking that
proper information are entered in the form fields before submission.
Forms are not of much use in terms of processing and posting when
you are limited to HTML and you don't have access to other script such as CGI.
This discussion is limited to form validations. If you want learn how to create html forms,
check out the html form page.
The following example alerts the value entered the text fields:
<html>
<head>
</head>
<body>
<FORM name="fm">
Type your first name:
<INPUT type="text" name="first"><br>
Type your last name:
<INPUT type="text" name="last">
<INPUT type="button" name="dis" value="Display"
onClick='alert("You say your name is: "+document.fm.first.value+"
"+document.fm.last.value)'>
</FORM>
</body>
</html>
The only JavaScript concept of this
example is OnClick. onClick event handler responds when object is clicked
and executes the JavaScript code or function. In this case, it executes alert box . The alert box displays text box values. Here is the result of this example:
The following example explains displaying list box selected option:
We use onChange event
handler, to display alert box with the selected value. OnChange executes the specified
JavaScript code or function on the occurance of a change event. In this case, it
executes an alert box that displays selected value of the select box.
Here is the result of this example:
Form Validations
The most practical business use of javascript is object
validations. Making sure that the user's information is as it required.
This sample is java script code that checks and alerts if the fields of
the form are empty.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JAVASCRIPT>
function validate(formCheck) //Function with a parameter representing a form
name.
{
if (formCheck.name.value =="")
{
alert("Please provide your
name:");
formCheck.name.focus();
return false;
}
var mail=formCheck.email.value
if (mail.indexOf("@.") == -1)
{
alert("Please type a valid email:");
formCheck.email.focus();
return false;
}
return true;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="inform" action="" method
"post">
Your Name: <INPUT type=text NAME="name" value=""SIZE=20><br>
Your Eamil: <INPUT type=text NAME="email" value="" SIZE=30><br>
<INPUT type=button name="submit" value=" Send
" onClick = "return validate(inform)"; >
<INPUT type=reset name=reset value=" Clear ">
</FORM>
</BODY> </HTML>
How it works We created a function called validate
which takes a parameter. This parameter represents the form name. Using
if statement, we compare the text field name with empty string.
If this field is equal to the empty string, then displayed alert box and set the focus
to this field. We then return false to avoid the action to be continued.
Email field is slightly different. For this field, we check if @ and . are provided.
If not, we alert the user, set the focus and return false.
If the two controls pass true value, then the function returns true.
In this case, onClick event handler returns true and nothing happens.
Note: If the form action proceeds to another page, use onSubmit
instead of onClick. onSubmit executes the function and continues processing the file
defined in the form action.
|| 
|| 
|| 
Alert, Prompt, Confirm boxes