Javascript validating form
•Download as PPTX, PDF•
4 likes•3,697 views
JavaScript can be used to validate form data before submission. It checks that required fields are filled, emails and dates are valid, and text is not entered in numeric fields. Validation functions return false to stop submission if errors are found. For example, a function checks if the first name field is empty and alerts the user, returning false to prevent form submission. This function can be called on form submit using the onsubmit event.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Javascript validating form
Similar to Javascript validating form (20)
More from Jesus Obenita Jr.
More from Jesus Obenita Jr. (20)
Recently uploaded
Recently uploaded (20)
Javascript validating form
- 1. JAVASCRIPT FORM 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= "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>