How do I use Bootstrap 3 form validation when submit button is outside the form?

Question

I'm confused with the Bootstrap 3 implementation of form validation. I'm new to Bootstrap, and I cannot seem to get the form validation working with a form that does not include a submit button. The type of form validation I'm looking for can be seen with this code:

http://jsfiddle.net/hTPY7/1107/

<form>
    <div class="form-group">
        <label class="control-label" for="username">Email:</label>
        <div class="input-group">
            <input class="form-control" placeholder="Email" name="email" type="email" required />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
            <input class="form-control" type="password" placeholder="Password" name="lastname" type="text" required />
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

I know I can submit the form with some JQuery like the code below, but how can I use the Bootstrap 3 validation?

$( "#createUserSubmit" ).click(function() {
  $( "#newUserForm" ).submit();
});

I've been reading Stackoverflow for years, but this is my first post. I have looked around for answers, but all I can find are solutions which use other validation libraries. I would like to use Bootstrap's own built in functions.

Thanks!

can you add the html of your form or the html of the submit button at least? — Geo, May 11 '14 at 17:01
Sure, I've updated the post to show an example of form validation using only Bootstrap libraries with no other external libraries included. — Veita, May 11 '14 at 18:23

score 8 · Accepted Answer · edited May 23 '17 at 12:17

I have done some research, and I now know that the form validation I was seeing was not a function of Bootstrap but a new CSS3 / HTML5 feature. I don't believe it is possible (without JS) to perform this form validation unless the submit button is enclosed within the form. Here is an example of what was not working:

http://jsfiddle.net/hTPY7/1112/

Here's an example of how it was fixed:

http://jsfiddle.net/hTPY7/1113/

The <form> element needs to surround more than just the form, but also surround the Bootstrap modal divs.

Here is another post which summarizes my problem well:

HTML5 form validation for AJAX button submit

score 5 · Answer 2 · answered May 11 '14 at 17:07

we need to use some kind of external library or custom code to add validation rules, which will enable us to add validation classes to form. I don't think there is other way around.

Example:

http://jsfiddle.net/mapb_1990/hTPY7/9/

HTML:

<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

JS:

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

I've edited my original post with a variation on your JSFiddle showing the sort of Bootstrap validation I'd like to see. Thank You — Veita, May 11 '14 at 17:39
I cannot up vote until I have 15 reputation, but your post was helpful. If you look at my edit, you will see an example of form validation without an external library. Do you know how I can implement that validation function without including the submit button in the form? — Veita, May 11 '14 at 18:22
@user3625866 possible work around That will push the button waaay to the left, out of the screen. The nice thing with this is, you'd get graceful degradation when CSS is disabled. — aamir sajjad, May 11 '14 at 18:27
But why can I not use a control like this: Where the keyword "required" tells Bootstrap to perform some form validation — Veita, May 11 '14 at 23:19
because it is not supported, you have to write customize the code to achieve this — aamir sajjad, May 12 '14 at 00:54
But look at the example JSFiddle I posted. That only uses Bootstrap and has some form validation, but the submit button is inside the form. How can I trigger whatever Bootstrap is triggering using JQuery? — Veita, May 12 '14 at 01:38

score 2 · Answer 3 · answered Nov 23 '18 at 01:41

If you accept HTML5, with it's form validation, then it's very simple (no javascript required):

<form id="my-awesome-form">
    ...
</form>
...
<button type="submit" form="my-awesome-form">Submit</button>

Source: https://www.w3schools.com/tags/att_button_form.asp

Coverage is pretty decent: https://caniuse.com/#feat=form-attribute

How do I use Bootstrap 3 form validation when submit button is outside the form?

3 Answers3

Linked