Tuesday, 30 October 2018

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

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

});



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

No comments:

Post a Comment