Bootstrap 3 jQuery Validator Defaults

The following can be used with a Bootstrap 3 Horizontal Form.

jQuery.validator.setDefaults({
  debug: true,
  errorClass: 'has-error',
  validClass: 'has-success',
  ignore: "",
  highlight: function (element, errorClass, validClass) {
    $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
  },
  unhighlight: function (element, errorClass, validClass) {
    $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    $(element).closest('.form-group').find('.help-block').first().text('');
  },
  errorPlacement: function (error, element) {
    $(element).closest('.form-group').find('.help-block').first().text(error.text());
  },
  submitHandler: function (form) {
    if ($(form).valid()) {
      form.submit();
    }
  }
});

This assumes a basic form field structure as follows:

<form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-3" for="PhoneNumber">Phone Number:</label>
    <div class="col-sm-9">
      <input type="text" id="PhoneNumber" name="PhoneNumber" class="form-control" value="" required="required" maxlength="15" placeholder="Valid US Phone Number" />
      <span class="help-block"></span>
    </div>
  </div>
</form>
Mastodon: @[email protected]