jQuery代碼在完成表單驗證后顯示模式

Question

接下來是這個問題： 上一個問題

我的表單上有表單驗證，需要先進行驗證，即最小字符和數字等。

到目前為止，我的Jquery代碼顯示了按下“提交”按鈕之后的模式，並且表單中有一些輸入，但是沒有有效的輸入，因此我只需要輸入幾個字符，然后彈出模式，這是不理想的。

因此，我需要表格進行輸入和驗證，然后彈出模式，並且用戶必須接受條款和條件才能注冊。

我沒有運氣就嘗試了以下方法：

$(document).ready(function() {
  $("#login-form").submit.valid(function(e) {
    e.preventDefault();
    $(".modal").addClass("active");
  });
});

提前致謝

Answer 1

您應該在提交事件中使用if：

$("#login-form").submit(function(e) {
  e.preventDefault();
  if ($(this).valid()) {            // this assumes you are using something like jquery validate - from  your original code, it looks like you were attempting to do this
    $(".modal").addClass("active");
  } else {
    // do error stuff here
  }
});

Answer 2

為什么使用有效？ jQuery valid()不接受任何參數，僅返回true。 使用validate()代替使用處理程序。

$("#yourform").validate({
  submitHandler: function(form) {
    // ...
    form.submit();
  }
});

Answer 3

您可以在表格上執行此操作...

<form id="myform" action=".." method=".." onsubmit="return validateForm(this);"> 
.....
</form>

然后在您的腳本中定義validate（this）函數，該函數接收表單對象（this）。 現在假設您使用的是jQuery表單驗證插件

function validate(formObj){
  v = $(formObj).validate({ // initialize the plugin
        rules: {  //enter additional rules.
           input1: {required: true, email:true},   
           input2: {required: true, integer:true}
        },
        submitHandler: function(formObj) {
          $('#myform').removeAttr('onsubmit');   //remove the onsubmit attr..              
          $(modal).addClass('active');    //then show the modal here.. 

        }
      });
  return false; //which stops the form from submitting.. 
}

現在讓我們假設模式已彈出並且用戶已接受協議並單擊“同意”按鈕，然后觸發表單並發送表單

function sendFromModal(){
  $('#myform').submit();
   return true; //
}

這應該工作，我希望我能有所幫助。