Bootstrap 3 + Validation + Glyphicons

Bootstrap 3 Validation Plugin with Glyphicons

by bd22

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<form class="form-horizontal">
    <div class="form-group has-feedback">
        <div class="col-md-6">
            <input type="text" name="fname" id="fullName" class="form-control" placeholder="Enter first name" />
            <span class="glyphicon form-control-feedback" id="fullName"></span>
       </div>
    </div>
    <div class="form-group has-feedback">
        <div class="col-md-6">
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Enter last name" />
            <span class="glyphicon form-control-feedback" id="lname1"></span>
        </div>
    </div>  
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

CSS

body {
  padding: 20px;
}

JavaScript

$('form').validate({
  rules: {
    fullName: {
      minlength: 3,
      maxlength: 15,
      required: true
    },
    lname: {
      minlength: 3,
      maxlength: 15,
      required: true
    }
  },
  highlight: function(element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');
  },
  unhighlight: function(element) {
    var id_attr = "#" + $(element).attr("id") + "1";
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');
  },
  errorElement: 'span',
  errorClass: 'help-block',
  errorPlacement: function(error, element) {
    if (element.length) {
      error.insertAfter(element);
    } else {
      error.insertAfter(element);
    }
  }
});