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 行，輸入為空，這就是您的代碼在 AddClass 函數中中斷的原因。

如果這能解決您的問題，請告訴我。 干杯:)