Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Javascript validating form
Similar a Javascript validating form (20)
Más de Jesus Obenita Jr.
Más de Jesus Obenita Jr. (20)
Último
Último (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>