jQuery Validate onBlur with summary

Question

Trying to validate a form that I don't know the contents of and display a summary at the top of the page using jQuery Validate. I don't want messages next to each field. I can get it working fine onsubmit, and if I disable onfocusout/onblur/onkeyup, everything works nicely. At the moment I've been trying to do this through showErrors, but I'm open minded.

I'm under the impression that jQuery Validate only brings back the single element that failed when it fires onblur or keyup. What happens right now is that my summary gets overwritten each time, and when it fires onblur, the summary can come back empty (presumably since errorMap only includes the one element that failed). What I'd like is to update or regenerate my summary so that it stays correct as users move through the form.

I kind of think I might need to save a reference to my validator and then loop through validator.errors() or .elements(), but I'm not sure where to go with that approach. My entire validateform() function, which is called from any submit button being clicked, is below.

function validateform() {

$("form").validate({

    showErrors: function(errorMap, errorList) {

        var errorCount = this.numberOfInvalids();

        if (errorCount > 0) {
            if (errorCount == 1) {
                $("#errorContainer h3").html("Your form contains " + errorCount + " error, see details below.");
            }
            else { /*two or more errors */
                $("#errorContainer h3").html("Your form contains " + errorCount + " errors, see details below.");
            }
            var summary = '';

            $.each(errorMap, function(key, value) {
                var field = $('input[name="' + key + '"],select[name="' + key + '"],textarea[name="' + key + '"]');
                field.addClass('err');
                var fieldname = field.attr("rel");
                summary += '<p><span class="errorkey">' + fieldname + '</span> - <span class="errorvalue">' + value + "</span></p>";
            });
            $('#errorList').html(summary);
            $('#errorContainer').slideDown();
        }
    },
    onfocusout: false,
    onkeyup: false,
    onclick: false

});
}

score 0 · Answer 1 · answered Apr 25 '13 at 04:18

Assuming this form:

<div id="errorContainer"></div>
<form id="myform">
    <div>
        <label for="field1">field1</label>
        <input type="text" id="field1" name="field1" />
    </div>
    <div>
        <label for="field2">field2</label>
        <input type="text" id="field2" name="field2" />
    </div>
</form>

You can do something like this to get live errors and place them in a summary section:

$(function () {
    var
        container = $("#errorContainer"),
        validator = $("#myform").validate({
            rules: {
                field1: {
                    minlength: 2,
                    required: true
                },
                field2: {
                    required: true
                }
            },
            messages: {
                field1: {
                    minlength: "Please enter 2 or more characters for field1",
                    required: "Please enter field1"
                },
                field2: {
                    required: "Please enter field 2"
                }
            },
            onfocusout: function (element) {
                this.element(element);
            },
            errorPlacement: function (error, element) {
                var
                existingErSelector = $.validator.format("label[for={0}]:contains({1})", element.attr("id"), error.text());

                if (container.find(existingErSelector).length === 0) {
                    $("#errorContainer ").append(error);
                }
            },
            unhighlight: function (validElement) {
                container.find($.validator.format("label[for={0}]", validElement.id)).remove();
            }
        });
});

see this fiddle: http://jsfiddle.net/richwag/AjXqp/5/

jQuery Validate onBlur with summary

1 Answers1