The whole point of the above paragraph is that the information provided in a form is to be submitted to the server. For suppose, the labels in the form are name, age, phone number and password, there might be some requirements a user must possess to even fill ht form. These requirements are to be checked when the user clicks on the submit button and then the form has to be sent to the server. For example, sometimes when we fill some forms and miss an input field, it makes the field red and asks to fill out all the empty fields.
These are two methods a form can be submitted- the simple submit() method and the validation method. All the pre-defined requirements are checked in the validation method while in the submit() method, the form can be submitted just by clicking a button without checking anything, we'll learn about both the methods:
First, let us make a scenario:
Suppose, we are making a job application form with labels:
One way of doing this: (Using the form submit() method)
Using this method, we can check the pre-defined requirements but that makes the code a bit complicated. Hence, it is mostly used just to submit the form on clicking a button without validating any information.
Here, let us keep the server's part aside as PHP is a whole another language. Let us just use another HTML page or you can even use a website link. In the <form> tag, action refers to the page the form details are to be submitted to. Observe that the type of the button is kept as "submit" and then on clicking that button, a function from JS fun() is called which uses the submit() function to submit the form to the link given to the action attribute. Now, let us see the code.
Observe the colors:
Here we go:
See that even if all the requirements are not satisfied, an alert message is displayed and yet the form got submitted to the web page given to the action attribute. This is because the default behavior of submit() is to just submit the form without validation.
So, is there no way we can use submit() to validate? Sure, there is. We need to stop the default behavior of submit() before using it:
In line number 3 of the function, we need to use the line:
Even though it worked, observe the nested if-else statements. Well, we can use different functions for different pre-requisites and call them one after the other but it still will be complicated.
Now, let us go to the second method:
Validation before submission
Observe the colors: