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

UPDATE: To put the question into perspective I created another Fiddle that shows the same form outside of the modal.

When it meet the right conditions i.e you type an email address and hit the Get Started button it submits properly display the PHP page, in this case it shows a 404 error, but it does what is supposed to do, SUBMIT!

ORIGINAL PROBLEM: Now back to the problem: I would like to submit my form inside a bootstrap modal, but when I open the modal and type an email, and press the get started button: NOTHING HAPPENS

php won't submit

What am I doing wrong? Is there a JavaScript solution missing to submit the form correctly or are the validation errors interfering?

I'm a novice in JavaScript so I can't seem to figure out the coding solution if it's in fact js based.

Please help me figure this strange modal issue, thank you!

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

});
douniuta4783
douniuta4783 在这个插件中没有这样的选项叫做onError!
接近 2 年之前 回复
duanletao9487
duanletao9487 toolong
接近 2 年之前 回复

3个回答

Your code is missing two things

Add this in signup-form validator

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

Then in signup-form remove

name="submit"

from

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

You can read the explanation here javascript submit() is not a function?

duangewu5234
duangewu5234 你不明白你在说什么。 如果使用$(form).submit()而不是form.submit(),则会发生过多的递归。 如果查看源代码,您会看到带有此函数的submitHandler已经内置到插件中,并且只有在您想要更改或添加此默认行为时才使用它。 声称submitHandler是强制性选项很容易被驳斥。 看到这个jsFiddle显示验证并在有效时提交而无需指定submitHandler:https://jsfiddle.net/xnpo7m6v/
接近 2 年之前 回复
dongsechuan0535
dongsechuan0535 不,它不起作用。 submitHandler是必需的。 检查链接jqueryvalidation.org/documentation/#link-too-much-recursion
接近 2 年之前 回复
dougan4884
dougan4884 仅供参考 - 不需要submitHandler选项,因为您指定的函数与插件中已内置的默认submitHandler函数完全相同。 换句话说,将submitHandler保留为out,它将默认为相同的东西。 您的问题是由name =“submit”引起的,而不是因为缺少submitHandler。
接近 2 年之前 回复
dongmaxi6763
dongmaxi6763 非凡的回应! 感谢您不仅解释了这个问题,还给我资源,通过另一个Stackoverflow问题了解更多信息。 你是最好的!
接近 2 年之前 回复
duanlu6114
duanlu6114 检查小提琴jsfiddle.net/hf4kpx1L
接近 2 年之前 回复



你有验证逻辑,但是当表格实际有效时你不告诉它该做什么!</ p> \ n

您需要将其添加到验证对象:</ p>

  submitHandler:function(form){
$(form).submit(); //你在这里提交实际的表格
}
</ code> </ pre>

https://jqueryvalidation.org/validate/#submithandler </ p>
</ div>

展开原文

原文

You have the validation logic there, but you do not tell it what to do when the form is actually valid!

You need to add this to the validation object:

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

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

dozxos6346
dozxos6346 在submitHandler的插件中内置了一个默认函数,所以不,你不必指定它!
接近 2 年之前 回复
doulue1949
doulue1949 那个小提琴也不起作用,我无法让它在我的代码上工作。 请看这个小提琴:jsfiddle.net/okuwv57m看到当你输入正确的电子邮件地址并按下提交按钮它会进入下一页? 我想在小提琴里做那件事
接近 2 年之前 回复
dongmeiran609914
dongmeiran609914 too long
接近 2 年之前 回复
douhuanglou1445
douhuanglou1445 jsfiddle.net/o5vpt6ck/5仍然无法正常工作。 你能详细说明如何提交这份表格吗?
接近 2 年之前 回复



我认为真正的问题出在其他地方。 我正在调试您上传的代码,发现您的JS代码中存在错误。</ p>

</ p>
\ n

问题来自第82行,输入为空,这就是你的代码在AddClass函数中出现故障的原因。</ p>

</ p>

如果这可以解决您的问题,请告诉我。
欢呼:)</ p>
</ div>

展开原文

原文

I think the real issue is somewhere else. I was debugging the code you have uploaded and found that there is an error in your JS code.

enter image description here

issue originates from line number 82, the input is coming as null that's why your code is breaking in AddClass function.

enter image description here

Let me know if this solves your problem. Cheers :)

dovt85093
dovt85093 请勿在不发布实际代码和错误的情况下将代码或错误发布为图片。 否则,搜索引擎不会看到您的内容。
接近 2 年之前 回复
duanguanya3052
duanguanya3052 too long
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问