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

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

});

I was checking the code provided by you but it is giving several errors in js like it is unable to find the element with id "signup-username" and you have given id="email" to multiple elements. Id can be given to one element on one page. So please update it to proper code. — Kamal Paliwal, Oct 30 '18 at 16:41

score 1 · Accepted Answer · answered Oct 31 '18 at 11:50

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?

answered Oct 31 '18 at 11:50

Pawnesh Kumar

484
2
10

1

Phenomenal response! Thank you for not only explaining the problem, but giving me resources to learn more via another Stackoverflow question. You're the best! – ChosenJuan Nov 01 '18 at 17:31
1

FYI - the `submitHandler` option is not required because the function you specified is exactly the same as the default `submitHandler` function already built into the plugin. In other words, leave `submitHandler` out and it will default to the same exact thing. Your issue was caused by `name="submit"` and not because `submitHandler` was missing. – Sparky Nov 01 '18 at 18:43
No, it is not working. submitHandler is required. Check the link https://jqueryvalidation.org/documentation/#link-too-much-recursion – Pawnesh Kumar Nov 02 '18 at 06:46
You are not understanding what you're talking about. Too much recursion happens if you use `$(form).submit()` instead of `form.submit()`. If you look at the source, you will see a `submitHandler` with this function is already built into the plugin, and you only use it when you want to change or add to this default behavior. Claiming that `submitHandler` is a mandatory option is easily refuted. [See this jsFiddle that shows validation and submits when valid without having to specify `submitHandler`: https://jsfiddle.net/xnpo7m6v/](https://jsfiddle.net/xnpo7m6v/) – Sparky Nov 02 '18 at 15:57

score 0 · Answer 2 · answered Oct 26 '18 at 20:02

0

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

answered Oct 26 '18 at 20:02

Benjamin Dowson

584
5
14

https://jsfiddle.net/o5vpt6ck/5/ is still not working. Can you elaborate on how to make this form submit? – ChosenJuan Oct 26 '18 at 20:17
Try writing it this way instead `form.submit();`, see here https://jsfiddle.net/o5vpt6ck/6/ . The submission does happen, try it on your code outside of jsfiddle – Benjamin Dowson Oct 26 '18 at 20:41
That fiddle is not working either, I haven't been able to get it to work on my code. Please see this fiddle: https://jsfiddle.net/okuwv57m/ see when you type the correct email address and press the submit button it goes to the next page? I want to do that inside the fiddle – ChosenJuan Oct 29 '18 at 18:28
There is a default function built into the plugin for the `submitHandler`, so no, you do not have to specify this! – Sparky Nov 01 '18 at 14:00

score -1 · Answer 3 · answered Oct 30 '18 at 09:52

-1

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

answered Oct 30 '18 at 09:52

Mohit Mishra

87
1
10

Unfortunately, it didn't :( The problems is the modal itself, when I put the jQuery validation code inside any modal, after the validation conditions have been met it won't submit. – ChosenJuan Oct 30 '18 at 15:22
Please never post code or errors as pictures without also posting the actual code and errors. Otherwise, your content is not seen by the search engine. – Sparky Nov 02 '18 at 15:51

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

3 Answers3