Jquery.Validate error message on top of form

Question

I was wondering how to display a single error message above the form instead of individual field messages. like this form has http://jquery.bassistance.de/validate/demo/marketo/step2.htm

I know it has something to do with handles but not exactly sure how or where to put them

    <script>
    $(document).ready(function(){
    $("#valform").validate();
    });
    </script>

this is the code i have that uses all default validation

Answer 1

You should use invalidHandler for this functionality. Something like this should do:

$("#myform").validate({
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();

        if (errors) {
            $("#error-message").show().text("You missed " + errors + " field(s)");
        } else {
            $("#error-message").hide();
        }
    }
});

Example: http://jsfiddle.net/KheRr/1/

If you want to hide the default error messages, you should specify "" as the error message for the field and validation type:

$("#myform").validate({
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();

        if (errors) {
            $("#error-message").show().text("You missed " + errors + " field(s)");
        } else {
            $("#error-message").hide();
        }
    },
    messages: {
        field1: {
            required: "" // You'll have to do this for each field and validation type.
        }
    }
});

Example: http://jsfiddle.net/KheRr/2/