Javascript validating form

2,104 views
1,946 views

Published on

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

No Downloads
Views
Total views
2,104
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
206
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×