Bootstrap Modal中的JQuery验证表单在验证后不会提交

Question

更新： 为了正确看待这个问题，我创建了另一个Fiddle，它在模态之外显示了相同的表单。

当它满足正确的条件时，即你输入一个电子邮件地址并点击开始按钮它提交正确显示 PHP 页面，在这种情况下它显示 404 错误，但它做了应该做的事情，提交！

原始问题： 现在回到问题：我想在引导模式中提交我的表单，但是当我打开模式并输入电子邮件，然后按开始按钮时：没有发生任何事情

我做错了什么？是否缺少正确提交表单的 JavaScript 解决方案或验证错误是否干扰？

我是 JavaScript 的新手，所以如果它实际上是基于 js 的，我似乎无法弄清楚编码解决方案。

请帮我解决这个奇怪的模态问题，谢谢！

小提琴：https://jsfiddle.net/o5vpt6ck/3/

HTML：

<form id="signup-form" class="cd-signin-modal__form" action="confirm.php" method="post">
                <h3 class="bigsentence black text-center font-weight-bold">Create</h3>
                <p class="cd-signin-modal__fieldset">
                    <label class="cd-signin-modal__label cd-signin-modal__label--email cd-signin-modal__label--image-replace" for="signup-email">Enter your email address</label>
                    <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border signupfield" id="email" type="email" name="email" placeholder="Enter your email address">
                </p>

                <p class="cd-signin-modal__fieldset">
                    <input class="cd-signin-modal__input cd-signin-modal__input--full-width" name="submit" type="submit" value="GET STARTED">
                </p>
            </form>

JS：

$("#signup-form").validate ({

    // validation rules for registration formd
errorClass: "error-class",
validClass: "valid-class",
errorElement: 'div',
errorPlacement: function(error, element) {
    if(element.parent('.input-group').length) {
        error.insertAfter(element.parent());
    } else {
        error.insertAfter(element);
    }
},
onError : function(){
    $('.input-group.error-class').find('.help-block.form-error').each(function() {
      $(this).closest('.form-group').addClass('error-class').append($(this));
    });
},
        rules: {
    email: {email:true, required:true}
  },

    messages: {
        email: {
            required: "Please enter your email address",

        },


            highlight: function(element, errorClass) {
    $(element).removeClass(errorClass);
}    
    }

});

Answer 1

您的代码缺少两件事

将此添加到注册表单验证器中

submitHandler: function(frm) { 
    frm.submit();
}

然后在注册表单中删除

name="submit"

来自

<input class="cd-signin-modal__input cd-signin-modal__input--full-width" name="submit" value="GET STARTED" type="submit">

你可以在这里阅读解释javascript submit() is not a function?

Answer 2

你有验证逻辑，但你没有告诉它当表单真正有效时要做什么！

您需要将此添加到验证对象中：

submitHandler: function(form) {
    $(form).submit(); // You submit the actual form here
}

https://jqueryvalidation.org/validate/#submithandler

Answer 3

我认为真正的问题在其他地方。我在调试你上传的代码，发现你的JS代码有错误。

问题源于第 82 行，输入为 null，这就是您的代码在 AddClass 函数中中断的原因。

如果这能解决您的问题，请告诉我。 干杯:)