Javascript validating form

JAVASCRIPT
FORM VALIDATION
SOURCE: www.w3schools.com

JavaScript 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?

USING RETURN STATEMENT IN
VALIDATING FORM
• When using the return
statement/function return
false, the function will stop
executing, and return the
specified value.

Required Fields
• The function below checks if a field has been left empty. If
the field is blank, an alert box alerts a message, the
function returns false, and the form will not be submitted
<script>
function validateForm(){
if(document.myForm.fname.value== ‘ ’)
{
alert("First name must be filled out");
return false;
}
}
</script>

The function above could be called
when a form is submitted:
<form name="myForm"
action="demo_form.asp"
onsubmit="return validateForm()"
method="post">
First name: <input type="text"
name="fname">
<input type="submit" value="Submit">
</form>

<html><body>
<script>
function validateForm(){
if(document.myForm.lname.value== ‘ ‘)
{
alert("Last name must be filled out")
return false;
}
if(document.myForm.fname.value==‘ ‘)
{
alert("First name must be filled out")
return false;
}

if(document.myForm.mname.value==‘ ’)
{
alert("Middle name must be filled out")
return false;
}
if(document.myForm.bdate.value==‘ ‘)
{
alert("Birthdate must be filled out")
return false;
}
}
</script>

<form name= "myForm" onsubmit= "return
validateForm()" action= "demo.form.asp"
method= "post"/>
Last Name: <input type= "text" name= "lname"/>
<br>
First Name:<input type= "text" name= "fname"/>
<br>
Middle Name:<input type= "text" name=
"mname"/> <br>
Birthdate: <input type= "date" name= "bdate"/>
<br>
<input type= "submit" value= "Submit"/>
</form></body></html>

Javascript validating form

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Javascript validating form

Similaire à Javascript validating form (20)

Plus de Jesus Obenita Jr.

Plus de Jesus Obenita Jr. (20)

Dernier

Dernier (20)

Javascript validating form