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>