Twitter Boostrap Form Validation - Adding Validation States using jQuery Validation Plugin

Question

I have a simple login form designed using the Twitter Bootstrap framework as follows:

<form class="form-signin" role="form" action="index.php" method="post" id="login">
 <h2 class="form-signin-heading">Please Log in</h2>
 <input type="text" name="username" class="form-control" placeholder="Account Name" required autofocus>
 <input type="password" name="password" class="form-control" placeholder="Password" required>
 <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
 </form>

I'm using the jQuery Validation plugin to validate that the username/password fields have been entered before submitting the form - this is working well.

<script>
    $(document).ready(function () {
   // initialize the plugin
   $("#login").validate();
   });
</script>

I would like to take advantage of the Bootstrap validation states by making the error text ("This field is required") to appear in red and also for the associated form field to have the red border. I'm not sure how to go about adding the

.has-error

style to the appropriate elements?

Finally found my answer here: http://stackoverflow.com/questions/18754020/bootstrap-3-with-jquery-validation-plugin — user982124, Oct 19 '14 at 12:05

score 0 · Answer 1 · answered Oct 16 '14 at 02:51

0

Try:

$("#login").validate({
    errorClass: "has-error"
});

answered Oct 16 '14 at 02:51

artm

8,554
3
26
43

that made no difference unfortunately. Any other suggestions? – user982124 Oct 16 '14 at 05:54
I'm not sure how to check this - can you explain how to test this? – user982124 Oct 16 '14 at 11:24

Twitter Boostrap Form Validation - Adding Validation States using jQuery Validation Plugin

1 Answers1