Custom Style Validation in Asp.net MVC3

Introduction

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

Objective

Custom Style for Jquery validation in asp.net 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");
        error.data("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

     .field-validation-error
{
    color: #ffffff;
    background: url('themes/base/images/exclamation.gif') no-repeat 0 center; 
     width:20px;   
    padding: 5px 15px 10px 20px;
    height: 8px;
    font: bold 11px Arial, sans-serif;
    color:#fff;    
    z-index:9999;
    position:absolute;
   
}

.field-validation-valid
{
    display: none;
}
.field-validation-error span
{
    visibility:hidden;
}

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">
</div>

Conclusion

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