jQuery - catching validate error callback from server

Question

I'm trying to capture the jquery validate plugin error callback. I understand you can easily hook into this if I was calling validate directly:

$('#form').validate({ 
    invalidHandler: function(form, validator) {
       var errors = validator.numberOfInvalids();
       if (errors) {
           //etc
       }
    }
});

But I'm not. Instead, my form is submitted to server and if !Model.IsValid then the server returns the invalid model and populates the place holder with the error message:

<span data-valmsg-replace="true" data-valmsg-for="Email" class="field-validation-error">This field is required</span>

I need to know when this span gets updated with the error message because I have the following wrapper for it:

<div class="errorContainer">
     @Html.ValidationMessageFor(m => m.Email)  /*This is the span above*/
</div>

Where div.errorContainer { visibility : hidden; } and I need to make it visible only when there is an error message (because it has a background and does not belong unless there is an error inside).

How can I do this? The optimal solution would be where I can respond to the error from BOTH client and server side validation because I plan to build in the client-side validation after I make sure the server side is covered. I guess the better question then is, is there a way to have the invalidHandler callback fire from server returned errors?

You say you need to respond to the server's validation — is it validating on a natural form submit, or does it process an AJAX request? — Barney, Dec 22 '12 at 11:23
Thanks for the reply. All my form submits are ajax requests. Please advise. — parliament, Dec 22 '12 at 20:31
Ah ok I think I see where you were going with this... Let me think about this some more this morning, I think it may not be as hard as I thought it to be late last night. — parliament, Dec 22 '12 at 20:42
I'm confused. If you're just trying to capture error messages from the server, what's the point of the client-side jQuery Validation? — Sparky, Dec 24 '12 at 04:31

score 0 · Accepted Answer · edited May 23 '17 at 11:43

I just thought of this and haven't tested it yet but I think it will work. Will report back. Thanks Barney, your comment gave me a lightbulb.

$.ajax({
    url : '/Account/Login',
    dataType: $('#form').serialize(),
    beforeSend : function(xhr, opts){

        ... form validation ...

        if(formNotValid){
             xhr.abort(); /*Abort request*/
             /*Display client generated errors*/
        }

    },
    success: function(result){  // return from server is a JsonResult(new { success = true/false, viewResult = this.RenderPartialView("Login", model)})  

        if(result.success){
            //No errors
        }
        else{

            /*Display server generated errors*/

            $('#form').empty().html(result.viewResult);
            $('span.field-validation-error').each(function () {
                 $(this).parent().css({ "visibility": "visible" });
            });

            $('span.field-validation-valid').each(function () {
                 $(this).parent().css({ "visibility": "hidden" });
            });
        }


    }
});

NOTE: this.RenderPartialView("Login", model) is a custom extension method found here

jQuery - catching validate error callback from server

1 Answers1