show fancy tooltip as data annotation gets triggered in asp.net mvc 5
Modify Validation Messages in ASP.NET MVC with jQuery Validation
Some time ago I needed to change the way in which the unobtrusive validation messages were displayed in a form part of an ASP.NET MVC application.
The reason was that the amount of space available in the window was limited and it was a requirement to display the proper validation messages, even though fitting them in the screen was impossible.
I decided that the best option to solve this issue was to modify the way the validation messages were shown in the form…instead of displaying them as text next to the form input, the application would display the messages associated to each form input as tooltips.
Here is an example to demonstrate how to achieve this functionality.
Let’s create an Employee class with the following class definition. A few data annotations have been added to the properties of the class in order to trigger specific validation messages.
In order to edit items from this class, we will use a view with a form that containsHtml.ValidationMessageFor helper methods to display the validation errors for the Employee class properties.
Such a view would provide the following result:
In order to modify the way in which the unobstrusive validation messages are displayed, we need to access one of the methods provided by the jQuery Validator that is packaged with ASP.NET MVC. The setDefaults method allows us to modify the jQuery Validator’s default settings.
For this specific scenario we need to modify the Validator’s showErrors property. In an MVC application the default showErrors property is a function which displays the validation errors associated with a form input. An easy way to test this is to add the following script to the View.
In this case, unobtrusive validation would still work: the form would not submit if there are errors, however, there would be no error messages displayed.
The showErrors function is called everytime a validation event occurs (keyup, onblur, submit). The two parameters in the function signature provide information about the elements currently validated when the event is triggered.
The errorMap variable is an object with key/value pairs, where the keys refer to the name of an input field, and the values for these keys refer to the validation message for that input.
The errorList variable is an array of objects, where the objects in the array contain two properties: an element property (whose value is a DOM element) and a message property (whose value is the message specific to that DOM element).
Using this information, it is possible to create a new showErrors method that will allow us to display unobtrusive validation messages in a different manner:
FIRST ADD THIS IN YOUR MASTER VIEW
In this case we are using the errorList parameter to determine the validation errors in a form. When an element is invalid, a tooltip (from Bootstrap) is added in order to display the validation message.
SECOND CHANGE TOOLTIP DESIGN IN BOOTSTRAP.CSS
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
/*background-color: #000000;*/
background-color:red;
border-radius: 4px;
}
THIRD REMOVE DEFAULT HELPER VALIDATION GENEREATED BY SCAFOLDER
In order to remove the tooltip if the element becomes valid, we are taking advantage of thedefaultShowErrors method, which adds the valid CSS class to form elements and helps identify those elements which are no longer invalid.
Since the defaultShowErrors method is being used, it is important to remove all theHtml.ValidationFor helpers from the Razor View, so only one set of validation messages is displayed for the input elements:
Comments
Post a Comment