CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4jquery-validate
nixon
nixon

Reputation: 1972

Update validation summary in 'real time'

Hi I am using MVC4 with client side validation. This works great for showing validation messages next to the fields.

I have added a validation summary:

 @Html.ValidationSummary(false)

This works, client side 'n all. I would like it to behave differently though; currently the messages in the validation summary only change when the submit button is clicked. I would like them to be dynamically, populated in a similar fashion to each field's validation message.

Can someone suggest a way to achieve this ?

Any information on what triggers the summary update would be great.

Upvotes: 12

Views: 13476

Answers (3)

Romain
Romain

Reputation: 11

Javascript:

function resetValidationSummary() {
    var form = $('#myForm');

    var validator = form.validate();
    validator.resetForm();

    if (form.valid()) {
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');
    }
}

Css:

.validation-summary-valid {
    display: none;
}

Upvotes: 0

Torbjörn Nomell
Torbjörn Nomell

Reputation: 3010

I've set up the validation summary to update in 'real time' also considering the following:

  1. Update the summary only once it's visible (after page validate/submit)
  2. Clear the summary when everything is valid

Let's extract the validator, overrride showErrors() and implement our logic:

var validator = $('form').data('validator');
validator.settings.showErrors = function (map, errors) {
    this.defaultShowErrors();
    if ($('div[data-valmsg-summary=true] li:visible').length) {
        this.checkForm();
        if (this.errorList.length)
            $(this.currentForm).triggerHandler("invalid-form", [this]);
        else
            $(this.currentForm).resetSummary();
    }
}

Since I'm using this solution for my entire site I've created the following init (onready):

$('form').each(function () {
    var validator = $(this).data('validator');
    if (validator) {
        validator.settings.showErrors = function (map, errors) {
            this.defaultShowErrors();
            if ($('div[data-valmsg-summary=true] li:visible').length) {
                this.checkForm();
                if (this.errorList.length)
                    $(this.currentForm).triggerHandler("invalid-form", [this]);
                else
                    $(this.currentForm).resetSummary();
            }
        };
    }
});

And here's the resetSummary used above:

jQuery.fn.resetSummary = function () {
    var form = this.is('form') ? this : this.closest('form');
    form.find("[data-valmsg-summary=true]")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid")
        .find("ul")
        .empty();
    return this;
};

Upvotes: 8

politus
politus

Reputation: 6086

The client side summary seems to be generated when the whole form is validated, and you can do this yourself by calling the valid() plugin method. Add this after the jquery validation scripts. 

<script>
    $(function () {
        $(':input').on("keyup click", function () {
            $('form').valid();
        });
    });
</script>

The example events I have included are keyup and click but you can add to or remove from this space separated list.

Upvotes: 3

Related Questions