jquery.validate.unobtrusive: Is it possible to have a validation summary list with unique errors?

Question

I have a table with different input elements that are required. When I now don't choose an item of the 3 select lists, I got the same error message 3 times.

JavaScript:

$("#btnSubmit").click(function (e) {
    e.preventDefault();
    var form = $(this).closest("form");

    if (form.valid()) {
        var data = form.serialize();
        var url = form.attr("action");

        $.ajax({
            url: url,
            data: data,
        });
    }
});

The form:

<form method="post" id="simpleForm" action="/MvcApplication4/Home/PostData" novalidate="novalidate">
    <table class="grid">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Description</th>
                <th>DropDown</th>
            </tr>
        </thead>
        <tbody>
            <tr class="gridrow">
                <td>
                    <input type="hidden" value="c590fea7-54cf-49f7-8d41-c6db0095fd90" autocomplete="off" name="list.index"><input type="hidden" value="1" name="list[c590fea7-54cf-49f7-8d41-c6db0095fd90].Id" id="list_c590fea7-54cf-49f7-8d41-c6db0095fd90__Id" data-val-required="The Id field is required." data-val-number="The field Id must be a number." data-val="true">
                    1
                </td>
                <td>
                    <input type="text" value="Name1" name="list[c590fea7-54cf-49f7-8d41-c6db0095fd90].Name" id="list_c590fea7-54cf-49f7-8d41-c6db0095fd90__Name" data-val-required="The Name field is required." data-val="true" class="valid"></td>
                <td>
                    <input type="text" value="bla1" name="list[c590fea7-54cf-49f7-8d41-c6db0095fd90].Description" id="list_c590fea7-54cf-49f7-8d41-c6db0095fd90__Description" data-val-required="The Description field is required." data-val="true" class="valid">
                </td>
                <td>
                    <select name="list[c590fea7-54cf-49f7-8d41-c6db0095fd90].SelectedItem" id="list_c590fea7-54cf-49f7-8d41-c6db0095fd90__SelectedItem" data-val-required="The SelectedItem field is required." data-val="true" class="input-validation-error">
                        <option value="">Choose a value</option>
                        <option value="1">Wert1</option>
                        <option value="2">Wert2</option>
                        <option value="3">Wert3</option>
                    </select></td>
            </tr>
            <tr class="gridrow_alternate">
                <td>
                    <input type="hidden" value="febf58eb-a55e-4e4a-8460-ec5473b44bd6" autocomplete="off" name="list.index"><input type="hidden" value="2" name="list[febf58eb-a55e-4e4a-8460-ec5473b44bd6].Id" id="list_febf58eb-a55e-4e4a-8460-ec5473b44bd6__Id" data-val-required="The Id field is required." data-val-number="The field Id must be a number." data-val="true">
                    2
                </td>
                <td>
                    <input type="text" value="Name2" name="list[febf58eb-a55e-4e4a-8460-ec5473b44bd6].Name" id="list_febf58eb-a55e-4e4a-8460-ec5473b44bd6__Name" data-val-required="The Name field is required." data-val="true" class="valid"></td>
                <td>
                    <input type="text" value="bla2" name="list[febf58eb-a55e-4e4a-8460-ec5473b44bd6].Description" id="list_febf58eb-a55e-4e4a-8460-ec5473b44bd6__Description" data-val-required="The Description field is required." data-val="true" class="valid">
                </td>
                <td>
                    <select name="list[febf58eb-a55e-4e4a-8460-ec5473b44bd6].SelectedItem" id="list_febf58eb-a55e-4e4a-8460-ec5473b44bd6__SelectedItem" data-val-required="The SelectedItem field is required." data-val="true" class="input-validation-error">
                        <option value="">Choose a value</option>
                        <option value="1">Wert1</option>
                        <option value="2">Wert2</option>
                        <option value="3">Wert3</option>
                    </select></td>
            </tr>
            <tr class="gridrow">
                <td>
                    <input type="hidden" value="68eb5fe9-4fc5-4350-b2c7-a997fd6abce6" autocomplete="off" name="list.index"><input type="hidden" value="3" name="list[68eb5fe9-4fc5-4350-b2c7-a997fd6abce6].Id" id="list_68eb5fe9-4fc5-4350-b2c7-a997fd6abce6__Id" data-val-required="The Id field is required." data-val-number="The field Id must be a number." data-val="true">
                    3
                </td>
                <td>
                    <input type="text" value="Name3" name="list[68eb5fe9-4fc5-4350-b2c7-a997fd6abce6].Name" id="list_68eb5fe9-4fc5-4350-b2c7-a997fd6abce6__Name" data-val-required="The Name field is required." data-val="true" class="valid"></td>
                <td>
                    <input type="text" value="bla3" name="list[68eb5fe9-4fc5-4350-b2c7-a997fd6abce6].Description" id="list_68eb5fe9-4fc5-4350-b2c7-a997fd6abce6__Description" data-val-required="The Description field is required." data-val="true" class="valid">
                </td>
                <td>
                    <select name="list[68eb5fe9-4fc5-4350-b2c7-a997fd6abce6].SelectedItem" id="list_68eb5fe9-4fc5-4350-b2c7-a997fd6abce6__SelectedItem" data-val-required="The SelectedItem field is required." data-val="true" class="input-validation-error">
                        <option value="">Choose a value</option>
                        <option value="1">Wert1</option>
                        <option value="2">Wert2</option>
                        <option value="3">Wert3</option>
                    </select></td>
            </tr>
        </tbody>
    </table>
    <input type="submit" id="btnSubmit" value="submit">
    <div data-valmsg-summary="true" class="validation-summary-errors">
        <ul>
            <li>The SelectedItem field is required.</li>
            <li>The SelectedItem field is required.</li>
            <li>The SelectedItem field is required.</li>
        </ul>
    </div>
</form>

Scripts:

<script type="text/javascript" src="~/Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.js"></script>

I want to display a message like:

"To submit the form you have to select a value for all dropdown lists."

And this message should be displayed once and not 3 times. The same goes for the textboxes.

jsFiddle demo: http://jsfiddle.net/6ZQQ2/1/

My solution right now:

function onErrors(event, validator) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

        var uniqueList = {};
        $.each(validator.errorList, function () {
            uniqueList[this.message] = this.message;
        });

        for (key in uniqueList) {
            $("<li />").html(uniqueList[key]).appendTo(list);
        }
    }
}

So I just changed the code in jquery.validate.unobtrusive.js.

Answer 1

I like your solution @Rookian but you don't want to change jquery.validate.unobtrusive.js

You can listen to invalid-form.validate and put your implementation in there

form.bind("invalid-form.validate", function (evt, validator) {
    var container = $(this).find("[data-valmsg-summary=true]"),
    list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

        var uniqueList = {};
        $.each(validator.errorList, function () {
            uniqueList[this.message] = this.message;
        });

        for (key in uniqueList) {
            $("<li />").html(uniqueList[key]).appendTo(list);
        }
    }
});

I did something similar in mvc3, hope it works for you as well.