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

Question

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 ie 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

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

});

Answer 1

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?

Answer 2

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

Answer 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.

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

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