Whats in this post?
- Background and Explanation of the code
To copy code: Click “View Source” on the right of this code snippet.
Background and Explanation of the code
The form validation function,
validate_form(), is embedded in the
headelement near the top of the page. The line (
We use this ‘
valid' variable to keep track of whether our form has been filled out correctly. If one of our checks fails, we’ll set
false. Next, we return the value of our
'valid' variable to the
onSubmit event handler. If the value is
true then the form will be sent to the server; if it’s
false then the form will not be sent.
View the Output and Test the validation:
Save the source code provided in this post as HTML file. Open that file into browser. Keep all or any of the field empty/unselected and submit the form clicking the ‘Send Details’ button. You will be shown popup window with appropriate error message. If you fill all fields then no popup window will be displayed since all validations are ok. To submit this page to the server you need to put your server-side page/program name in ‘action’ attribute of ‘<form>’ tag.