JQuery Bootstrap 内的验证表单验证后不会提交模态

Question

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

当它满足正确的条件时，即您输入一个电子邮件地址并点击“开始”按钮，它会正确提交并显示 PHP 页面，在这种情况下它会显示 404 错误，但它会执行预期的操作要做，提交！

原问题： 现在回到问题：我想在 bootstrap 模态中提交我的表单，但是当我打开模态并输入电子邮件并按下开始按钮时：没有发生

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

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

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

Fiddle: 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(form) {
    $(form).submit(); // You submit the actual form here
}

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

Answer 2

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

问题源自第 82 行，输入为空，这就是您的代码在 AddClass 函数中出现问题的原因。

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

Answer 3

您的代码缺少两件事

在注册表单验证器中添加这个

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?

JQuery Bootstrap 内的验证表单验证后不会提交模态

JQuery Validation Form inside Bootstrap Modal won't submit after validation

javascript

php

jquery

jquery-validate

bootstrap-4