Prevent Form from Submitting if there are Errors

Question

Before I get into the problem details, I still need to tell you about this form I am creating. I have a Registration form and once the user submits the form by clicking the Submit button, it will NOT go directly to a Successfully Registered page. The user will be seeing a Confirmation page prior to that. In this page, the user will see all the data he inputted for him to review. Below it are the Confirm button and the Return button (if user still likes/needs to edit his details, it will then show the form for him to edit once this button is clicked). But here's the thing, the Registration form page and the Confirmation page are in just the same page. What I did is that when the user submits the form, it will hide some elements including the Submit button and then just show the details he inputted. When the user clicks the Return button on the Confirmation page, it will just then show again the hidden fields so the user can edit his details.

What I did in preventing the form from submitting when there are errors is that I disabled the submit button. But it is not working. I am using bootstrap for my form so when there are errors, the input fields' borders would turn red and would obtain a class has-error . Here's what I did:

$("td .form-group").each(function() {
    if($(this).hasClass('has-error') == true) {
        $('#submit').attr('disabled', false);
    } else { 
        $('#submit').attr('disabled',true);
    }
});

But again, it is not working. I also googled some jQueries like the .valid() and .validate() functions but I'm not really sure about it and also didn't work for me.

I also did this code where the Submit button should disable when required fields are still empty. And it is perfectly working:

$('#submit').attr('disabled',true);
$('input[id^="account"]').keyup(function() {
    if(($('#profile-company_name').val().length !=0) && ($('#account-mail_address').val().length !=0) && ($('#account-confirmemail').val().length !=0) && ($('#account-login_name').val().length !=0) && (($('#account-password').val().length !=0)) && ($('#account-confirmpassword').val().length !=0)) {
        $('#submit').attr('disabled', false);
    } else {
        $('#submit').attr('disabled',true);
    }
});

I hope you understand my problem. I will make it clearer if this confuses you.

Answer 1

What I did in preventing the form from submitting when there are errors is that I disabled the submit button. But it is not working.

When is it checking for errors? It needs to disable the submit button at the same time it is checking for errors. Your code doesn't work because there's no event telling it WHEN to execute. WHEN do you want submit button to be disabled?

Do you want it triggered when the field is validated or when the form is submitted?

You can't really tie it to the submit button unless you want to click it first to validate the form fields, and then again to submit validated fields. Then you'll need to figure out how to tell it that it's been validated like by a class, maybe? Only accept inputs that hasClass('valid')?

Answer 2

below are the changes

$(".form-group").find("td").each(function() {
    if($(this).hasClass('has-error')) {
        $('input[type="submit"]').prop('disabled', false);
    } else { 
        $('input[type="submit"]').prop('disabled', true);
    }
});

Answer 3

Try the following

$('#submit').click(function(){
    var error = false;
    $("td .form-group").each(function() {
        if($(this).hasClass('has-error') == true) {
            error = true;
            return false; //break out of .each                
        }
    });
    return !error;
});

Answer 4

You can achieve this by maintaining 2 sections.

1. Form section

<form id="form1">
  <input type="text" id="name" />
  <input type="email" id="email" />
  <input type="button" id="confirm" value="Confirm" />
</form>

2. Confirm section

<div id="disp_data" style="display: none;">
  <lable>Name: <span id="name_val"></span></lable>
  <lable>Email: <span id="email_val"></span></lable>
  <input type="button" id="return" value="Return" />
  <input type="button" id="submit" value="Submit" />
</div>

You have to submit the form by using js submit method on validating the form in confirm section (When the user clicks on submit button)

$("#submit").click(function(){
    var error_cnt = false;
    if($("#name").val() == '') {
      error_cnt = true;
        alert("Enter Name");      
    }

    if($("#email").val() == '') {
      error_cnt = true;
        alert("Enter Email");
    }

   if(error_cnt == false) {
        $("#form1").submit();
   } else {
    $("#disp_data").hide();
    $("#form1").show();
   }

Demo

Answer 5

You have to prevent the form from sumition by return back a boolean false so that it will stop the execution.

$('#submit').click(function(){    

 var ret = (($('#profile-company_name').val().length !=0) && ($('#account-mail_address').val().length !=0) && ($('#account-confirmemail').val().length !=0) && ($('#account-login_name').val().length !=0) && (($('#account-password').val().length !=0)) && ($('#account-confirmpassword').val().length !=0));
 if(!ret) return false;

});

If you want to disable the submit button in case of any error you need to monitor the changes of each input fields. so better to give a class name to all those input fields like commonClass

then

function validation_check(){

 var ret = (($('#profile-company_name').val().length !=0) && ($('#account-mail_address').val().length !=0) && ($('#account-confirmemail').val().length !=0) && ($('#account-login_name').val().length !=0) && (($('#account-password').val().length !=0)) && ($('#account-confirmpassword').val().length !=0));
 return ret;

}

$("#submit").prop("disabled",true)

$(".commonClass").change(function(){
    if(validation_check()){
      $("#submit").prop("disabled",false)
    }
    else {
    $("#submit").prop("disabled",true)
    }
});

Answer 6

please use onsubmit attribute in the form element and write a javascript function to return false when there is any error. I've added fiddle you can try.

HTML FORM

<form action="" method="" onsubmit="return dosubmit();">
  <input type="text" id="name" />
  <input type="email" id="email" />
  <input type="submit" value="Submit" />
</form>

JAVASCRIPT

function dosubmit() {
    if(false) { //Check for errors, if there are errors return false. This will prevent th form being submitted.

    return false;
  } else {
    return true;
  }
}

Let me know if this fixes your issue.