表单验证完成后显示模式的 Jquery 代码

Question

接着这个问题：Previous 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>

然后在您的脚本中定义接收表单对象（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; //
}

这应该可以，我希望我对你有足够的帮助..