Question

I have some forms that I am validating with jQuery Validate plugin. The next code by examples, works fine:

<script type="text/javascript">
$(document).ready(function(){
    $("#transactionform").validate({
       rules: {
        'cliente[nombre]': {
           required: true,
           minlength: 5
        },
        'cliente[id]': {
           required: true
        }
      }
    });
});
</script>

In this form ‘cliente[nombre]’ is a simple text input, and ‘cliente[id]’ is a hidden field that must be filled by some javascript function. Actually, the validation errors are displayed next to the corresponding field, and that includes the hidden fields.

What I want is to have a special div for displaying the validating errors of hidden inputs and displaying non-hidden input errors using the corresponding label (as it is now).

Answer 1

I think you could make use of the errorPlacement function and utilize it with some custom element selection e.g.

errorPlacement: function(error, element) {
    error.appendTo('#invalid-' + element.attr('id'));
}

You could then position each error message individually using custom html, example:
http://jsfiddle.net/FZUnu/

I hope this helps!