出現錯誤時阻止表單提交

Question

在深入研究問題詳細信息之前，我仍然需要向您介紹我正在創建的此表單。 我有一個注冊表單，一旦用戶單擊“提交”按鈕提交表單，它就不會直接進入“成功注冊”頁面。 在此之前，用戶將看到“確認”頁面。 在此頁面中，用戶將看到他輸入供他查看的所有數據。 在其下方是“確認”按鈕和“返回”按鈕（如果用戶仍然喜歡/需要編輯其詳細信息，則單擊該按鈕后，它將顯示供他編輯的表單）。 但是，注冊表單頁面和確認頁面位於同一頁面中。 我所做的是，當用戶提交表單時，它將隱藏一些元素，包括“提交”按鈕，然后僅顯示他輸入的詳細信息。 當用戶單擊“確認”頁面上的“返回”按鈕時，它將再次顯示隱藏的字段，以便用戶可以編輯其詳細信息。

我在出現錯誤時阻止表單提交的做法是禁用了提交按鈕。 但這是行不通的。 我為表單使用了引導程序，因此當出現錯誤時，輸入字段的邊框將變為紅色，並將獲得類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);
    }
});

希望你能理解我的問題。 如果這讓您感到困惑，我會更清楚地說明。

Answer 1

我在出現錯誤時阻止表單提交的做法是禁用了提交按鈕。 但這是行不通的。

什么時候檢查錯誤？ 它需要在檢查錯誤的同時禁用“提交”按鈕。 您的代碼無效，因為沒有事件告訴它何時執行。 您何時要禁用“提交”按鈕？

是否要在驗證字段或提交表單時觸發它？

除非您要先單擊它以驗證表單字段，然后再次單擊以提交經過驗證的字段，否則您實際上不能將其綁定到“提交”按鈕。 然后，您需要弄清楚如何告訴它已像某個班級一樣經過驗證了嗎？ 只接受具有hasClass（'valid'）的輸入？

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

演示版

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

讓我知道這是否可以解決您的問題。