jQuery代码在完成表单验证后显示模式

时间:2019-02-15 11:25:07

标签: javascript jquery

下面是这个问题:Previous question

我在表单上进行了表单验证,首先需要进行验证,即最小字符和数字等。

到目前为止,我的Jquery代码显示了按下“提交”按钮之后的模式,并且表单中有一些输入,但是没有有效的输入,因此我只需要输入几个字符,然后弹出模式,这是不理想的。

因此,我需要表单进行输入和验证,然后弹出模式,并且用户必须接受条款和条件才能注册。

我没有运气尝试过以下方法:

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

预先感谢

3 个答案:

答案 0 :(得分: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
  }
});

答案 1 :(得分:0)

为什么使用有效? jQuery valid()不接受任何参数,仅返回true。使用validate()代替处理程序。

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

答案 2 :(得分:0)

您可以在表单上执行此操作...

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

这应该有效,我希望我能提供足够的帮助。