Custom Style Validation in Asp.net MVC3

Nighil
Posted by in ASP.NET MVC category on for Intermediate level | Points: 250 | Views : 3207 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 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




Page copy protected against web site content infringement by Copyscape

About the Author

Nighil
Full Name: NIGHIL DAS
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)