Skip to content

Instantly share code, notes, and snippets.

@lkaczanowski
Created September 20, 2012 20:20
Show Gist options
  • Save lkaczanowski/3758120 to your computer and use it in GitHub Desktop.
Save lkaczanowski/3758120 to your computer and use it in GitHub Desktop.
Styling asp.net MVC validation summary as Twitter bootstrap "flash"
function onErrors(form, validator) { // 'this' is the form element
var container = $(this).find("[data-valmsg-summary=true]"),
list = container.find("ul");
if (list && list.length && validator.errorList.length) {
list.empty();
container.addClass("validation-summary-errors").removeClass("validation-summary-valid");
$.each(validator.errorList, function () {
$("<li />").html(this.message).appendTo(list);
});
// callback to show the summary has been shown
// unobtrusive validation has no inputs so hook into global object
if (window.onValidatorSummaryShown) {
window.onValidatorSummaryShown.call(container);
}
}
}
(function () {
// add a close button to the '.validation-summary-errors' div "flash"
function addCloseButton($container) {
$('.close', $container).remove();
$('<a>', {
'class': 'close',
'href': '#'
}).append('×').click(function (e) {
e.preventDefault();
var $div = $(this).parent('div');
$div.slideUp(function (e) {
$div.remove();
});
}).prependTo($container);
};
// detect the '.validation-summary-errors' div after full page postback
if ($('.validation-summary-errors').length !== 0) {
addCloseButton($('.validation-summary-errors'));
}
// the '.validation-summary-errors' has appeared without full page postback
window.onValidatorSummaryShown = function () {
addCloseButton(this);
};
} ());
.validation-summary-errors,
.alert-message
{
clear:both;
position: relative;
padding: 7px 15px;
margin-bottom: 18px;
color: #404040;
background-color: #eedc94;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
background-image: -o-linear-gradient(top, #fceec1, #eedc94);
background-image: linear-gradient(top, #fceec1, #eedc94);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #eedc94 #eedc94 #e4c652;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
border-width: 1px;
border-style: solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.validation-summary-errors .close,
.alert-message .close {
margin-top: 1px;
*margin-top: 0;
}
.validation-summary-errors a,
.alert-message a {
font-weight: bold;
color: #404040;
}
.validation-summary-errors p a,
.alert-message.danger p a,
.alert-message.error p a,
.alert-message.success p a,
.alert-message.info p a {
color: #ffffff;
}
.alert-message h5 {
line-height: 18px;
}
.validation-summary-errors p,
.alert-message p {
margin-bottom: 0;
}
.validation-summary-errors div,
.alert-message div {
margin-top: 5px;
margin-bottom: 2px;
line-height: 28px;
}
.alert-message .btn {
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.alert-message.block-message {
background-image: none;
background-color: #fdf5d9;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
padding: 14px;
border-color: #fceec1;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.validation-summary-errors ul,
.alert-message.block-message ul, .alert-message.block-message p {
margin-right: 30px;
}
.validation-summary-errors ul,
.alert-message.block-message ul {
margin-bottom: 0;
}
.alert-message.block-message li {
color: #404040;
}
.alert-message.block-message .alert-actions {
margin-top: 5px;
}
.alert-message.block-message.error, .alert-message.block-message.success, .alert-message.block-message.info {
color: #404040;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.alert-message.block-message.error {
background-color: #fddfde;
border-color: #fbc7c6;
}
.alert-message.block-message.success {
background-color: #d1eed1;
border-color: #bfe7bf;
}
.alert-message.block-message.info {
background-color: #ddf4fb;
border-color: #c6edf9;
}
.alert-message.block-message.danger p a,
.alert-message.block-message.error p a,
.alert-message.block-message.success p a,
.alert-message.block-message.info p a {
color: #404040;
}
.validation-summary-errors,
.btn.danger,
.alert-message.danger,
.btn.danger:hover,
.alert-message.danger:hover,
.btn.error,
.alert-message.error,
.btn.error:hover,
.alert-message.error:hover,
.btn.success,
.alert-message.success,
.btn.success:hover,
.alert-message.success:hover,
.btn.info,
.alert-message.info,
.btn.info:hover,
.alert-message.info:hover {
color: #ffffff;
}
.btn .close, .alert-message .close {
font-family: Arial, sans-serif;
line-height: 18px;
}
.validation-summary-errors,
.btn.danger,
.alert-message.danger,
.btn.error,
.alert-message.error {
background-color: #c43c35;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #c43c35 #c43c35 #882a25;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.success, .alert-message.success {
background-color: #57a957;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
background-image: -moz-linear-gradient(top, #62c462, #57a957);
background-image: -ms-linear-gradient(top, #62c462, #57a957);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
background-image: -webkit-linear-gradient(top, #62c462, #57a957);
background-image: -o-linear-gradient(top, #62c462, #57a957);
background-image: linear-gradient(top, #62c462, #57a957);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #57a957 #57a957 #3d773d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.info, .alert-message.info {
background-color: #339bb9;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
background-image: linear-gradient(top, #5bc0de, #339bb9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #339bb9 #339bb9 #22697d;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment