如果有错误，防止表单提交答案

【问题标题】：Prevent Form from Submitting if there are Errors如果有错误，防止表单提交
【发布时间】：2016-02-01 06:06:39
【问题描述】：

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

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

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

但同样，它不起作用。我还搜索了一些 jQueries，例如 .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);
    }
});

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

【问题讨论】：

如果验证失败返回false。
感谢您的回复。你有喜欢的，一个代码sn-p吗？
我能知道你使用的 jquery 和 bootstrap 的版本吗...
@EtheleneLaverne 一个例子jsfiddle.net/mLLbke4y
@DivakarGujjala 我真的不能说，当我查看页面源或检查的元素时它没有显示，因为我们只是在安装它们时使用了作曲家。所以我认为这是最新版本。

标签： javascript php jquery html forms

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

以下是变化

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

【讨论】：

它不工作，哟。至于我的$("td .form-group").each(function() { 中的td，我将我的字段放在一个表中td
直到不工作。 :( 但我必须告诉你，当我将代码 $("td .form-group").each(function() { ... }); 直接粘贴到浏览器的控制台上时，它可以正常工作。

【解决方案3】：

试试下面的

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

【讨论】：

你可以为此制作一个 jsFiddle 吗？

【解决方案4】：

您可以通过维护 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 方法提交表单

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

【讨论】：

我的意思是当表单字段出现错误时，不仅仅是字段为空，还有字段值是，例如，不遵循特定规则，如确认密码字段应该等于密码字段。每当确认密码字段出现特定错误时，提交按钮应该被禁用。

【解决方案5】：

你必须通过返回一个布尔值 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)
    }
});

【讨论】：

关于commonClass，这就是我正在做的，但由于我使用引导程序作为我的表单，当我检查元素时，每个字段看起来像这样<div class="form-group field-account-password required has-error"><div class="col-lg-6"><input type="password" id="account-password" class="form-control" name="Account[password]"></div><div class="col-lg-5"></div><div class="col-lg-6"><p class="help-block help-block-error">Password should contain at least 6 characters.</p></div> </div>，你可以看到它是由divs 包围，如果有错误，实际的input 字段不会改变。
唯一改变类的元素是div类之外的元素，当div包含有错误的input标签时，它从has-success变为has-error类
@EtheleneLaverne <input type="password" id="account-password" class="form-control commonClass" name="Account[password]"> 使用$(".commonClass").change(function(){...} 时不会触发更改事件
我希望你能真正帮助我。
@EtheleneLaverne 你现在的问题是什么......？？提交按钮没有被禁用..??我还想通过更改值来了解它是否调用了更改功能..??

【解决方案6】：

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

HTML 表单

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

如果这能解决您的问题，请告诉我。

【讨论】：