CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user1800556
user1800556

Reputation: 67

Bootstrap 3 Validation state, 'Error' showing by default

I have a simple bootstrap 3 styled form. I have a span with help-block which I understand would be displayed if the parent div with class form-group also has has-error defined, however, the error help text is showing by default.

I found this SO thread, however, I thought Bootstrap would take care of this hiding/unhiding logic. Is that an incorrect assumption? Am I supposed to take care of show-hide?

<form id="the-form" action="/abc" method="post">                                  

 <div class="form-group">
  <label for="title" class="control-label">Title</label>
  <input id="title" name="title" class="form-control" placeholder="Title" type="text" value="">    
  <span class="help-block">Title is not valid.</span>                   
 </div>

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

However, the error text is shown by default:

enter image description here

Upvotes: 2

Views: 1265

Answers (1)

bySamo
bySamo

Reputation: 475

When you add the class has-error to the form-group div.. Bootstrap is only applying the CSS error on elements inside of the from-group.

If you want to show the error msg only on errors. You have to show or hide it by JavaScript.. There are severals way to do it.. One It would be: Hide the err msg by default, you can do it with bootstrap class hidden

<span class="help-block hidden">Title is not valid.</span>

So when you are adding the class has-error to the form you should remove the class hidden from the help-block.. Then you need to add that class hidden again when the form is correct.. all of this with JS. That will work.

Upvotes: 3

Related Questions