Prevent form submission in HTML with JQuery

Prevent form submission in HTML with JQuery

For web developers. It becomes very important, at times, to prevent form submission in the default manner. Often this is because we would like some validations at the client end itself.

Validations like –

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.   

prevent form submission by default in html

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 –

$('#form').submit(function(e){
        var flag2 = 0;            //this will count the number of fields that are non-empty
        e.preventDefault();       //stops default submission
        $('input').each(function(){
            if($(this).val() !== ''){
                flag2++;          //value increases when input field has at least some value
            }
        });
        /* Checks whether all inputs where non-empty, if yes, then submit the form */
        if(flag2 ===4)       //assuming we had 4 input fields
        {        
            var value = $('#form').serialize();            
            $.post(
              "submit.php",          //assuming this is our target file
              {value:value},
              function(data){
                    // show some confirmation, or do something else as callback to successful form submit
              }
            );
        }
        else{
            /* Validation failed. Form won't be submitted */
            alert('Please enter the fields correctly');
        }
    });

Step 4

Once the JQuery code runs, we have been successful to prevent form submission in the default HTML fashion, and control the code according to our conditions.

The rest of the web application will flow normally.

Why don’t you have a look at the concept with a demo? Take a look. Click on this link. In this demo, try submitting the form without any inputs. It stops the submission. This would not have happened in general.

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.

Just try the stuff and do let me know in the comments section!

Comments are closed.