Custom Style Validation in MVC3

Posted by in ASP.NET MVC category on for Intermediate level | Points: 250 | Views : 5199 red flag

Normally Jquery unobtrusive validation in MVC3 has some default style
here we can look at a validation performed in Custom Style by modifying jquery.validate.unobtrusive.js file and applying some styles to it

 Download source code for Custom Style Validation in MVC3


Default validation style in with jquery unobtrusive is not so stylish. Here we will look at developing a custom style in mvc3.


Custom Style for Jquery validation in mvc3

Using the code

Edited jquery.validate.unobtrusive.min.js and renamed it as jquery.validate.unobtrusivecustom.js  and made the below changes so that validation messages are only displayed on mouse hover
//  function onError(error, inputElement) {  // 'this' is the form element      
var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;
container.attr("id", inputElement[0].name + "forvalidation");
container.removeClass("field-validation-valid").addClass("field-validation-error");"unobtrusiveContainer", container);
$('.field-validation-error >span').css('visibility', 'hidden');
container.mouseover(function (e) {
var top = $("[htmlfor='" + inputElement[0].name + "']").offset().top;
var left = $("[htmlfor='" + inputElement[0].name + "']").offset().left;
var formwidth = $('form').width();
left = formwidth - left + 25;
$('#validationMessagetoshow').css('top', top - 43);
$('#validationMessagetoshow').html($("[htmlfor='" + inputElement[0].name + "']").html());
$("[htmlfor='" + inputElement[0].name + "']").css('visibility', 'hidden');
$('#validationMessagetoshow').css('right', left);
//$('#validationMessagetoshow').css('left', pageX + 15);
$('#validationMessagetoshow').css('visibility', 'visible');
}).mouseout(function () {
$('#validationMessagetoshow').css('visibility', 'hidden');
then applied some changes in style also in Site.css and changed it to CustomSite.css

color: #ffffff;
background: url('themes/base/images/exclamation.gif') no-repeat 0 center;
padding: 5px 15px 10px 20px;
height: 8px;
font: bold 11px Arial, sans-serif;


display: none;
.field-validation-error span
and Added a hidden div in CustomVal.cshtml which populates on mouse hover

     <div id="validationMessagetoshow" style="visibility: hidden; color: Red; padding: 10px;
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid;
background-color: #D6E3F3; z-index: 99999; position: absolute; float: right;
top: 50px">


Download the complete project and see the difference. Thanks for Reading

Page copy protected against web site content infringement by Copyscape

About the Author

Member Level: Starter
Member Status: Member
Member Since: 5/15/2013 5:47:09 AM
Country: India
Nighil Das M

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)