Your SlideShare is downloading. ×
Javascript validating form
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Javascript validating form

1,431
views

Published on

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JAVASCRIPTFORM VALIDATION SOURCE: www.w3schools.com
  • 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. 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. 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. 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. <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. 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. <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. BROWSER’S OUTPUT