Skip to content

Instantly share code, notes, and snippets.

@ijason
Created September 10, 2012 19:47
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save ijason/3693364 to your computer and use it in GitHub Desktop.
Save ijason/3693364 to your computer and use it in GitHub Desktop.
MVC Validation with Bootstrap
$(function () {
$('span.field-validation-valid, span.field-validation-error').each(function () {
$(this).addClass('help-inline');
});
$('.validation-summary-errors').each(function () {
$(this).addClass('alert');
$(this).addClass('alert-error');
$(this).addClass('alert-block');
});
$('form').submit(function () {
if ($(this).valid()) {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length == 0) {
$(this).removeClass('error');
}
});
}
else {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('error');
}
});
$('.validation-summary-errors').each(function () {
if ($(this).hasClass('alert-error') == false) {
$(this).addClass('alert');
$(this).addClass('alert-error');
$(this).addClass('alert-block');
}
});
}
});
$('form').each(function () {
$(this).find('div.control-group').each(function () {
if ($(this).find('span.field-validation-error').length > 0) {
$(this).addClass('error');
}
});
});
$("input[type='password'], input[type='text']").blur(function () {
if ($(this).hasClass('input-validation-error') == true || $(this).closest(".control-group").find('span.field-validation-error').length > 0) {
$(this).addClass('error');
$(this).closest(".control-group").addClass("error");
} else {
$(this).removeClass('error');
$(this).closest(".control-group").removeClass("error");
}
});
});
var page = function () {
//Update that validator
$.validator.setDefaults({
highlight: function (element) {
$(element).closest(".control-group").addClass("error");
},
unhighlight: function (element) {
$(element).closest(".control-group").removeClass("error");
}
});
} ();
@ijason
Copy link
Author

ijason commented Sep 10, 2012

Reference this script after your validation scripts to integrate MVC validation with Bootstrap.
No CSS changes are needed.

@YodasMyDad
Copy link

Unfortunately this no longer seems to work

@ebadola
Copy link

ebadola commented Jun 8, 2019

hello, I want to use Toastr to show error messages how can I do that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment