Question

更新：为了使问题更直观，我创建了另一个Fiddle，它在模态之外显示了相同的形式。

当它满足正确的条件时，即您键入电子邮件地址并单击“入门”按钮，它将正确提交并显示PHP页面，在这种情况下，它会显示404错误，但会执行应做的事，提交！

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

我在做什么错？是否缺少JavaScript解决方案才能正确提交表单？还是验证错误在干扰您？

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

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

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函数中中断的原因。

让我知道这是否可以解决您的问题。干杯：）

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

3 个答案: