如果出现错误，则阻止表单提交 - Prevent Form from Submitting if there are Errors

在我进入问题细节之前，我仍然需要告诉你我正在创建的这个表格。我有一个注册表单，一旦用户通过单击"提交"按钮提交表单，它将不会直接转到已成功注册页面。在此之前，用户将看到"确认"页面。在此页面中，用户将看到他输入的所有数据以供他查看。下面是"确认"按钮和"返回"按钮(如果用户仍然喜欢/需要编辑他的详细信息，则单击此按钮后，它将显示表单供他编辑(。但事情是这样的，注册表单页面和确认页面在同一页面中。我所做的是，当用户提交表单时，它将隐藏一些元素，包括"提交"按钮，然后只显示他输入的详细信息。当用户单击"确认"页面上的"返回"按钮时，它将再次显示隐藏字段，以便用户可以编辑其详细信息。

我在出现错误时阻止表单提交所做的是禁用提交按钮。但它不起作用。我正在为我的表单使用引导程序，因此当出现错误时，输入字段的边框将变为红色并获得类has-error。这是我所做的：

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

但同样，它不起作用。我还用谷歌搜索了一些jQuery，例如.valid()和.validate()函数，但我不太确定，也不适合我。

我还做了这段代码，当必填字段仍然为空时，提交按钮应该禁用。它正在完美地工作：

$('#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);
    }
});

我希望你理解我的问题。如果这让你感到困惑，我会说得更清楚。

我在出现错误时阻止表单提交所做的是禁用提交按钮。但它不起作用。

何时检查错误？它需要在检查错误的同时禁用提交按钮。您的代码不起作用，因为没有事件告诉它何时执行。您希望何时禁用提交按钮？

您希望在验证字段或提交表单时触发它吗？

您无法真正将其绑定到提交按钮，除非您想先单击它以验证表单字段，然后再次单击它以提交已验证的字段。然后你需要弄清楚如何告诉它它已经被一个类验证了，也许？只接受有类('有效'(的输入？

以下是更改

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

尝试以下操作

$('#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;
});

您可以通过维护 2 个部分来实现此目的。

1. 表格部分

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

2. 确认部分

<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>

您必须在确认部分中验证表单时使用 js 提交方法提交表单(当用户单击提交按钮时(

$("#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();
   }

演示

您必须通过返回布尔值 false 来防止表单求和，以便它停止执行。

$('#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;
});

如果要在出现任何错误时禁用提交按钮，则需要监视每个输入字段的更改。所以最好给所有这些输入字段一个类名，比如commonClass

然后

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)
    }
});

请在表单元素中使用onsubmit属性，并编写一个JavaScript函数，以便在出现任何错误时返回false。我添加了你可以尝试的小提琴。

网页表单

<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;
  }
}

让我知道这是否可以解决您的问题。