Question

I have a small form which needs validation summary, but this validation summary should be definitly placed on another form.

I know, that there is a restriction – validation summary checks only elements in current form, so what am i searching for is some kind of crunch.

Is there any solution which does nt involve writing own validation and hundreds of lines of Javascript?

Answer 1

it is not possible to solve this problem with standart events: before submit event triggered “validate” method Validation Summary is not present on page and callint “validate” stops event dispatching (if you have any errors of cause).

What have i done involves edititng of “jquery.validate.unobtrusive.js”. Steps:

1) In “jquery.validate.unobtrusive.js” file in function onErrors I added event dispatching:

function onErrors(form, validator) {
        // native code
        jQuery("#submitErrorProxy").trigger(jQuery.Event("click")); // my event
    }

2) Added hidden input on my form with id="submitErrorProxy"

3) added div container on place where Validation Summary should be displayed.

<div class="form-line" id="validationSummaryContainer">
     //validation summary should be moved here 
</div>

4) Added next Javascipt method

    $("#submitErrorProxy").click(function (e) {
                $("#validationSummaryContainer").empty();
                $(".validation-summary-errors").clone(true, true)
                 .appendTo("#validationSummaryContainer");
            });

Where clone(true, true) – makes copy of chosen element with all its child elements. And appendTo used instead of move because original validaton summary should be present on original form.

5) Hidden original ValidtionSummary container.

<div class="form-line" style="visibility: hidden; height: 0px">
    @Html.ValidationSummary(false)
</div>