|
|
Javascript Form Validation
Javascript form validation means checking that the proper information is entered in the form fields before it is submitted. Forms aren't of much use in terms of processing and posting if you are only limited to HTML, and you don't have access to other scripts such as CGI. This tutaorial is limited to form validations (if you want to learn how to create them, check-out the HTML form page).
This example alerts the value entered in 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 in this example is onClick. The onClick event handler responds when an object is clicked, and executes the Javascript code or function. In this case, it executes alert box. The alert box displays the values in the text boxes.
Here is the result of this example:
|
This example shows how to select and display:
<html>
<body>
<html>
<body>
<FORM name="fm2">
Select one:
<select name="selec" onchange='alert("You selected "+document.fm2.selec.value)'><br>
<option>Select One
<option value="Java">Java
<option value="C++">C++
<option value="Cobol">Cobol
</select>
</FORM>
</body>
</html>
</body>
</html>
|
We used the onChange event handler to display the alert box with the selected value. onChange executes the specified Javascript code or function in an event change. (when this happens, it executes an alert box that displays the selected value of the select box).
Here is the result of this example:
|
Javascript Object Validations
Javascript object validations have a practical business use (making sure that a required user's information is correct.
This example checks and alerts if the fields of the form are empty:
<HTML>
<HEAD>
<script type="text/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 Email: <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 an if statement, we compare the text field name with the empty string. If this field is equal to the empty string, then an alert box is displayed, and the focus is set to this field. We then return a false outcome to avoid the action being continued.
The email field is slightly different. For this field, we check if the '@' and '.' are provided. If not, we alert the user, set the focus, and return false. If the two controls pass a "true" value, then the function returns "true". In this case, the 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.
|
Operators   Alert, Prompt, & Confirm boxes
|
|
