Display MVC3 Unobtrusive ValidationSummary errors in a jQuery UI Dialog

Question

I'm looking to display MVC3's unobtrusive ValidationSummary errors in a jQuery UI Dialog. Specifically, I want to be able to have a "live" $('.validation-summary-errors').dialog(...);-like experience. That is to say, whenever MVC3 client-side validation would show (for the first time) or update (on repeat offenses) the .validation-summary-errors element, I want the results to appear in a jQuery UI Dialog.

I currently have something along the lines of

@Using Html.BeginForm("Action", "Controller", FormMethod.Post, New With {.id = "MyForm"})
    @Html.ValidationSummary()
...

$('#MyForm').submit(function () {
    if (!$(this).valid()) {
        $('.validation-summary-errors').dialog(...);
        return false;
    }
});

but this doesn't feel right to me.

It feels like I should be able to hook into the validation framework and be notified that validation completed, and there was an error summary that is now shown or updated with the errors. Then using that event, dialog() the now-shown/updated .validation-summary-errors element. Is there such a thing? Or are there any other suggestions?

Answer 1

So this is how I ended up doing it. I didn't find much documentation, but did enough JS digging to get to this point. Not sure how I feel about it. I do know that I no longer need to hook the form's submit event and "double-up" on the validation calls, so that's good. It just seems that this solution feels "cryptic" (at least in my inexperienced eyes), and I would have expected (and am still looking for) a solution that feels more baked-in.

$(function () {
    // If there is an error element already (server side error), show it.
    showValidationSummaryDialog();

    // When the form validates, and there is an error element, show it
    $('#MyForm').bind('invalid-form.validate', function (error, element) {
       showValidationSummaryDialog();
    }
}

function showValidationSummaryDialog() {
    $('.validation-summary-errors').dialog({
        title: 'Unable to Save',
        close: function () {
            $(this).dialog('destroy')
                           .prependTo($('#MyForm')); // jQuery moves the source element out of the DOM.
                                                     // We need to put it back in its place afterwards for validation to maintain its contents.
                                                     // TODO: Is there a better way?
        }
    });
}

Answer 2

If some one want to display both ValidationSummary & ValidationSummaryDialog then try this.

as per @ckittel.

@using (Html.BeginForm())
{ 
    @Html.ValidationSummary()
    <div id="ValidationSummary" style="display:none" class="validation-summary-errors">
    </div>
}


<script type="text/javascript">

    function showValidationSummaryDialog() {
        $('#ValidationSummary').html($('.validation-summary-errors').html());

        $('#ValidationSummary').dialog({
            title: 'Error',
            modal: true
        });
    }

    $(document).ready(function () {
        $('form').bind('invalid-form.validate', function (error, element) {
            showValidationSummaryDialog();
        });
    });

</script>