JQuery Validate Unobtrusive - entering a single input error event

Question

I create a site with ASP.NET MVC and use jQuery to test an unobtrusive library. I want to know if there is a way to connect to an event that displays a validation message, for example. at the point where the user enters something invalid (as opposed to when they press the submit button).

The reason I want to do this is because I am designing my error messages, such as mini pop-ups that appear above the field with the error, i.e. using absolute positioning. Due to the fact that one field may have different verification errors, I want to be able to correctly set the position of the field, given the variable height of the message. I also need to handle this event so that I can apply the class to the red border around the input element.

Answer 1

Here is a great script: https://gist.github.com/remi/957732 that sets hooks for different events in jQuery.validate. It allows you to bind to several events, in your case it will look like this:

$(function () { $('form').addTriggersToJqueryValidate(); $('form').bind("elementValidation", function (event, element, result) { console.log("Something is invalid"); }); }) 

Very comfortably!

Answer 2

you can check and form the element when users go to the next element in the form with

 $("form#myformid").validate().element("#ModelObject_NameofField"); 

and use the replacement value for each item as shown in this previous answer

How to use errorPlacement for a specific element?

your popup <div/> should grow with the text inside it, so you only need to bind the bottom left or right element.