CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Chlebta
Chlebta

Reputation: 3110

Twitter-Bootstrap form validation style

this is my html code :

<div class="form-group has-feedback has-errors" id="password-group">
    <input type="password" value="" name="password" placeholder="New Password" class="form-control" id="password">
    <span class="glyphicon glyphicon-lock form-control-feedback has-error"></span>
    <p class="help-block" id="password-error">The password must be at least 6 characters.</p><p class="help-block" id="password-error">The password confirmation does not match.</p>
</div>

and this screen cap of my form : enter image description here

Normally the form should have the error style( in red).so what I've missed here?

Note I'm using Jquery to add the error tags, I'm using server validation via JSON :

$form.find('.form-group').removeClass('has-errors');
$form.find('.form-group').addClass('has-errors');
var field = errors[key];
for ( var i = 0; i < field.length; i++) {
  var $group = $form.find('#' + key + '-group');
  //add the error class and set the error text
  $group.remove('#' + key + '-error');
  $group.append('<p id="'+ key + '-error" class="help-block">'+ field[i]+'</p>');
}

Upvotes: 2

Views: 184

Answers (1)

Don&#39;t Panic
Don&#39;t Panic

Reputation: 41810

Your code says has-errors, but the Bootstrap class is just has-error

Also thought I should point out that it looks like your javascript is generating two different elements with id="password-error". Multiple elements with the same id attribute is not valid HTML.

Upvotes: 1

Related Questions