asp.net mvc 3 jquery adding validation message manually

Question

I've been search for quite a while and haven't been able to find an answer to this.

I am using asp.net MVC 3 with unobtrusive validation. My model is bound with data annotations for simple validation (required fields, regex, etc..). However, I have more complex validation that occurs on the server. I'm doing an ajax post which returns me validation add'l messages that come from my domain model. All I want to do is put those validation messages on the form in the place of the existing ones. I don't want to use partial views since all I've really got are messages coming back and there isn't a need to refresh the whole view. Also, I'm not adding new rules or new inputs to the form so $.validator.unobtrusive.parse won't work. These are just messages I want to put on the form. The $.post call returns a list of message with which field is/was affected and the validation message.

Here's kind of what I'm looking to do

 $.post(url, { someData}, function (data) {
         for (message in data.Messages) {
             $("#form").validate().addMessage(message.Field, message.Text);
         }
    });

Thanks for your help

Per request, here's a sample of the returning JSON, it's fairly simple.

{"id":0,"messages":["Level":0,"Message":"Style is required","Name":"Style"}],"operationResult":false}

messages is a list of objects that contain the severity level, the property the error belonged to and the error message. I would use the name in the messages object to match where it want on the form.

Ringtailed

FYI: Partial views doesn't mean that you have to refresh the whole view. – Trenchant

Can you expound? You'd at least have to refresh the part of the view bound to the model in question. I have some drop down boxes with a ton of items and I'm not terribly keen on rebuilding that and roundtripping the entire select list – Ringtailed

It would be easier if you'd provide the reply message (probably in a form of JSON) with validation errors. Then it would be easier for us to elaborate on the solution. So you make an Ajax request. Show us what gets back to the client... – Trenchant

I know I could do something like $('span[data-valmsg-for=Name').text(message) but that makes me a bit nervous, tinkering around with it that directly. I'm assuming/hoping that the html 5 property doesn't change. And then what would happen on subsequent validation if data annotations did trigger something. I'm going to test it out but it doesn't seem like a good solution – Ringtailed

Did you find something that worked better for you? I am running into the same issue. – Enchase

I have not, Still hoping for a good solution – Ringtailed

Answer 1

I had exactly the same requirement, I actually found the following method.

var validator = $("form").validate();
validator.showErrors({field : "Error Message"})

Gurge

Nice! That seems to work, but how do I do this when the field is dynamic. It comes to me as a string and you can't define an object literal with a variable name. It comes back as message.Name in my response. This is more javascript question than anything else. My thought was to do something like this var showMeErrors; showMeErrors[message.Name] = message.Message; But that didn't work – Ringtailed

Nevermind, I found it. Forgot to define my object as empty using {}. Thanks for the great solution. – Ringtailed

Strangely it looks like validator.resetForm() doesn't work when you use this – Ringtailed

I ended up having to clear them manually based on css class which isn't great. @rohan did you have to handle this situation – Ringtailed

@ChrisCap did you try: validator.resetForm() to clear the error messages? – Precipitin

@ChrisCap without clearing manually you could have use $('#form').trigger('invalid-form.validate', validator); Just added it now so that it may help others. – Acropetal