Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
156
rated 0 times [  159] [ 3]  / answers: 1 / hits: 69338  / 10 Years ago, sun, may 11, 2014, 12:00:00

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!


More From » jquery

 Answers
21

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


[#71081] Friday, May 9, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
austenjordang

Total Points: 544
Total Questions: 112
Total Answers: 112

Location: Monaco
Member since Sun, Jan 16, 2022
2 Years ago
;