Anyways, for many such validations in the front-end, we plan to prevent form submission in the HTML pre-formatted way. What we do is, we bypass the form submission triggered by HTML using JavaScript (in this case, we will use JQuery), and then let JavaScript complete the validations and continue with the submission.

Prevent form submission – step by step guide

The process is really simple. In order to prevent form submission, you must handle the event using JQuery.

Step 1

The form must be created. That’s the very first step. Well, just create a form and give the general attributes to it. So, the form would contain a method attribute and an action attribute.

Once that is done we would proceed to the JQuery part.

Step 2

The JQuery code is pretty simple. In order to prevent form submission, we will use the following code –

$('#form').submit(function(e){ // will fire on the form submission event
e.preventDefault(); //this is the code to block submission
}

The above code will catch the form’s submit event and stop the generic submission.

Step 3

Now we may implement whatever validations or other manipulations we want to make. Once we have done that, we can accordingly direct the flow of our web application. Basically, after validations are complete; form submission will happen through AJAX.

For example, say we wanted to prevent form submission in order to check whether all our input fields were containing some value or not.

So, the idea is, if all fields have at least some value other than “null”, then our form will be submitted to the target file. Otherwise, we will just notify the user that something went wrong. He or she might consider reviewing the form inputs.

So, the below snippet will be our code, for the scenario described above –

How will my application get affected if I prevent default submission?

This is a major concern among developers in the web industry.

Although this is not at all a concern, but still several coders around the world have this question. Well the answer, according to me is, it is absolutely fine. There is no overhead or lag in your web application for this feature.

This is plain JQuery and you might just as well squeeze it into your other JavaScript or JQuery snippets. This is just some few lines of code, and it gives you the flexibility to control your web application’s input stream.

Your users may input and try to submit any junk value. When you prevent default submission, you have the power to filter junk inputs and false submits.