JavaScript OnSubmit Form Validation
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of JavaScript onsubmit form validation, here we created form with onsubmit event it will validate any input detail when user submits form.
Validate means we know have to check form input fields filled or not and another thing is filled details is correct format or not we have to verify them also then only we can collect users correct details for our reference.
Step By Step Guide On Javascript Onsubmit Form Validation :-
Here we defined form with gender label inside that we provided two options ‘male,female’ of radio input fields.
We have to define ‘onsubmit’ event as form attribute with valid() function call so when user submits form then valid() function call will initialized.
In valid() method we are verifying whether any one option is selected by user or not because it can’t be accepted as empty result so we checking.
If they not provide any input we are notifying them to select any one option so user will definitely select any one option and printed message using alert box method.
<!DOCTYPE html>
<html>
<head>
<title>ON SUBMIT VALIDATION</title>
</head>
<body>
<script>
function valid(){
if(document.getElementById("female").checked || document.getElementById("male").checked){
alert("Input selected validated successfully");
}
else{
alert("select any one option");
}
}
</script>
<form method="post" action="" onsubmit="valid()">
<label>Gender :</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">Female</label>
<input type="radio" name="gender" id="male" value="male">
<label for="male">Male</label>
<input type="submit" value="Submit">
</form>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We defined form with ‘onsubmit’ event, it used to declare valid() function call. Within form we defined label ‘gender’ and two input fields with ‘radio’ type for provide ‘male,female’ options for users to select any one.
- Inside radio inputs we defined attributes ‘name,id,value’ with respective results because those used in script program to collects radio button details. Lastly we defined ‘submit’ button by ‘submit’ type input tag.
- In <script> tag we defined function valid() within that we checking which radio options selected by user using input attribute id’s ‘famale,male’.
- If user selected any one option then success message will appear in alert box, otherwise missing input message will displayed on alert box.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to use onsubmit event in javascript.
When we execute our program on browser we can see the result of gender label with two radio type options ‘female,male’ and submit button.
If user not selected gender input and clicked on submit button then alert box will appear top of the window tab with ‘select any one option’ message for notify user.
When user select any one option then ‘Input selected validated successfully’ message will appear in alert box.
I hope this tutorial on JavaScript onsubmit form validation helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
