0
JAVASCRIPTFORM 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 ser...
USING RETURN STATEMENT IN        VALIDATING FORM• When using the return  statement/function return  false, the function wi...
Required Fields• The function below checks if a field has been left empty. If   the field is blank, an alert box alerts a ...
The function above could be called    when a form is submitted:<form name="myForm"action="demo_form.asp"onsubmit="return v...
<html><body><script>function validateForm(){if(document.myForm.lname.value== ‘ ‘){alert("Last name must be filled out")ret...
if(document.myForm.mname.value==‘ ’){alert("Middle name must be filled out")return false;}if(document.myForm.bdate.value==...
<form name= "myForm" onsubmit= "returnvalidateForm()" action= "demo.form.asp"method= "post"/>Last Name: <input type= "text...
BROWSER’S OUTPUT
Upcoming SlideShare
Loading in...5
×

Javascript validating form

1,470

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,470
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript validating form"

  1. 1. JAVASCRIPTFORM VALIDATION SOURCE: www.w3schools.com
  2. 2. 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?
  3. 3. USING RETURN STATEMENT IN VALIDATING FORM• When using the return statement/function return false, the function will stop executing, and return the specified value.
  4. 4. 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>
  5. 5. 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>
  6. 6. <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;}
  7. 7. 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>
  8. 8. <form name= "myForm" onsubmit= "returnvalidateForm()" 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>
  9. 9. BROWSER’S OUTPUT
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×