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

Question

I am confused with the implementation of Boottrap 3 validation. I am new to Bootstrap and I cannot get the validation form to work 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 that I can submit the form using some jQuery, for example, the code below, but how can I use Bootstrap 3 validation?

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

I read Stackoverflow for years, but this is my first post. I searched for answers, but all I can find are solutions that use other validation libraries. I would like to use Bootstrap's own built-in functions.

Thanks!

Answer 1

I did some research, and now I know that the form check I saw was not a Bootstrap function, but a new CSS3 / HTML5 function. I do not consider it possible (without JS) to perform this form check if the submit button is not enclosed in the form. Here is an example of what doesn't work:

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

Here is an example of how it was fixed:

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

The <form> element should surround more than just the form, but it also surrounds Bootstrap modal divs.

Here is another post in which I am well versed in my problem:

HTML5 form validation to submit AJAX button

Answer 2

we need to use some external library or special code to add validation rules that will allow us to add validation classes to form. I do not think there is another way.

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