dongpangfu6322
dongpangfu6322
2018-10-26 19:55

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

});
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • doujiexin1136 doujiexin1136 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?

    点赞 评论 复制链接分享
  • doujiu8826 doujiu8826 3年前

    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 :)

    点赞 评论 复制链接分享
  • douji3426 douji3426 3年前

    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

    点赞 评论 复制链接分享