Question

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

我在阻止表单出错时提交的内容是我禁用了提交按钮。但它没有用。我正在为我的表单使用bootstrap，所以当出现错误时，输入字段的边框将变为红色并获得类has-error。这是我做的：

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

但同样，它不起作用。我还搜索了一些像.valid()和.validate()函数这样的jQueries，但我对此并不十分肯定，也不适用于我。

我也做了这个代码，当必填字段仍为空时，提交按钮应该禁用。它完全有效：

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

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

Answer 1

我在阻止表单出错时提交的内容是我禁用了提交按钮。但它没有用。

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

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

除非您想先点击它以验证表单字段，然后再次提交经过验证的字段，否则您无法将其与提交按钮绑定。然后你需要弄清楚如何告诉它它已经像一个类一样被验证了，也许？只接受hasClass（＆＃39;有效＆＃39;）的输入？

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

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

Answer 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

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

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

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

如果有错误，请阻止表单提交

6 个答案: