Scribd
Upload
5 views

Form Validation

The document explains how to use JavaScript for form validation in HTML, including checking for required fields, valid email addresses, and numeric inputs. It provides examples of alert, confirmation, and prompt dialog boxes for user interaction and validation feedback. The document includes code snippets demonstrating these functionalities in action.

Uploaded by

otieno.18742
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Form Validation

The document explains how to use JavaScript for form validation in HTML, including checking for required fields, valid email addresses, and numeric inputs. It provides examples of alert, confirmation, and prompt dialog boxes for user interaction and validation feedback. The document includes code snippets demonstrating these functionalities in action.

Uploaded by

otieno.18742
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

FORM VALIDATION

JavaScript can be used to validate data in HTML forms before sending off the content to a server.
Form data that typically are checked by a JavaScript could be:
 has the user left required fields empty
 has the user entered a valid e-mail address
 has the user entered a valid date
 has the user entered text in a numeric field
Required Fields
The function below checks if a required field has been left empty. If the required field is blank, an
alert box alerts a message and the function returns false. If a value is entered, the function returns
true (means that data is OK):
Example

<Script Type='Text/Javascript'>
Function Formvalidator(){
// Make Quick References To Our Fields
Var Firstname = Document.Getelementbyid('Firstname');
// Check Each Input In The Order That It Appears In The Form!
If(Isalphabet(Firstname, "Please Enter Only Letters For Your Name")){
Function Notempty(Elem, Helpermsg){
If(Elem.Value.Length == 0){
Alert(“pliz enter some input”);
Elem.Focus(); // Set The Focus To This Input
Return False;
}
Return True;
}
Function Isalphabet(Elem, Helpermsg){
Var Alphaexp = /^[A-Za-Z]+$/;
If(Elem.Value.Match(Alphaexp)){
Return True;
}Else{
Alert(Helpermsg);
Elem.Focus();
Return False;
}
}
<HTML><BODY>
<Form Onsubmit='Return Formvalidator()' >
First Name: <Input Type='Text' Id='Firstname' /><Br />
<Input Type='Submit' Value='Check Form' />

</Form></HTML>

Alert Dialog Box

An alert dialog box is mostly used to give a warning message to the users. For example, if one input
field requires to enter some text but the user does not provide any input, then as a part of validation,
you can use an alert box to give a warning message.

Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button
"OK" to select and proceed.

Example
<html>
<head>

<script type="text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>

</head>
<body>
<p>Click the following button to see the result: </p>

<form>
<input type="button" value="Click Me" onclick="Warn();" />
</form>
</body>
</html>

Confirmation Dialog Box

A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog
box with two buttons: Cancel.

If the user clicks on the OK button, the window method confirm() will return true. If the user
clicks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as
follows.

Example
<html>
<head>

<script type="text/javascript">
<!--
function getConfirmation(){
var retVal = confirm("Do you want to continue ?");
if( retVal == true ){
document.write ("User wants to continue!");
return true;
}
else{
document.write ("User does not want to continue!");
return false;
}
}
//-->
</script>

</head>
<body>
<p>Click the following button to see the result: </p>

<form>
<input type="button" value="Click Me" onclick="getConfirmation();" />
</form>

</body>
</html>

Prompt Dialog Box

The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it
enables you to interact with the user. The user needs to fill in the field and then click OK.

This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label
which you want to display in the text box and (ii) a default string to display in the text box.

This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window
method prompt() will return the entered value from the text box. If the user clicks the Cancel
button, the window method prompt() returns null.

Example

The following example shows how to use a prompt dialog box −

<html>
<head>

<script type="text/javascript">
<!--
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>

</head>
<body>
<p>Click the following button to see the result: </p>

<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>

</body>
</html>

You might also like