How to use jQuery Validation plugin with form-level server-side validation?

Question

What\'s the best way to trigger errors on elements for server-side validation errors that come back after the form passes the initial client-side validation?

$(\         


        

Answer 1

I think I figured it out from the documentation of Validator/showErrors

var validator = $("#contact_form").validate();
validator.showErrors({"state": "Bad state."});

Answer 2

Make it. Write a plugin that will do whatever you want. Or if you get to complicated, simply write a javascript function to do it and call that.

I would write a plugin that would create a div, fill it with the error text and animate it nicely.

Answer 3

On submit of the form, I would make the target of the form an invisible iframe on the page which would then call a function in the topWindow with it's result.

<iframe id="subject_frame" name="submit_frame" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe> 

then in the page in the iframe call a javascript method in the top window that either redirects on success or displays the errors.

In the iframe

<script language="javascript" type="text/javascript">
   window.top.window.submitComplete("<?php echo $response; ?>");
</script>   

In the top window (as an example)

function uploadComplete( result ){
    $.unblockUI();
    if(result == "OK"){
        $.blockUI({ message: "<span style='color:green;'>File upload successful, request submitted.</span><br/><br/>Redirecting..." }); 
        setTimeout(function() { 
            $.unblockUI({ 
                onUnblock: function(){ window.location='thankyou.php'; } 
            }); 
        }, 2000);

    } else {
        $.blockUI({ message: "<span style='color:red;'>Failed.</span><br/><br/>"+result }); 
        $('.blockOverlay').attr('title','Click to remove').click($.unblockUI);
    }
}