mvc之驗證IEnumerable 類型，多選框驗證

假設我們有這麼一種需求，我們要同時添加年級和年級下面的多個班級，我們一般會像下面這種做法。

Action中我們這樣接收：

[HttpPost]
public ActionResult CreateGrade(string gradeName, IEnumerable<string> classNames)
{

    return View();
}

View中我們一般會這樣做：

@using (Ajax.BeginForm("index", "home", new AjaxOptions { OnBegin="onBegin", OnSuccess = "onSuccess" }))
{
    <p>
        若要了解有關 ASP.NET MVC 的更多信息，請訪問 @Html.ActionLink("link me", "about", "home", new { plugin="dialog"})。
    </p>
    <input type="text" class="required" style="width:90px;" name="gradeName" />
    <input type="text" class="required" style="width:90px;" name="classNmae" />
    <input type="text" class="required" style="width:90px;" name="classNmae" />
    <input type="text" class="required" style="width:90px;" name="classNmae" />
    <button class="tn-button-primary" type="submit">
        <span class="tn-button-text">提交</span></button>
}

這種做法會有什麼問題呢？ 問題在於jquery.validate驗證不支持驗證多個相同的name，默認只驗證第一個，所以只要第一個驗證了，表單就可以提交了。我們要怎麼改進呢？其實很簡單，改一下班級的input的name就可以了。如下：

@using (Ajax.BeginForm("index", "home", new AjaxOptions { OnBegin="onBegin", OnSuccess = "onSuccess" }))
{
    <p>
        若要了解有關 ASP.NET MVC 的更多信息，請訪問 @Html.ActionLink("link me", "about", "home", new { plugin="dialog"})。
    </p>
    <input type="text" class="required" style="width:90px;" name="gradeName" />
    <input type="text" class="required" style="width:90px;" name="classNmae[0]" />
    <input type="text" class="required" style="width:90px;" name="classNmae[1]" />
    <input type="text" class="required" style="width:90px;" name="classNmae[2]" />
    <button class="tn-button-primary " type="submit">
        <span class="tn-button-text">提交</span></button>
}

這樣子就可以每一個都驗證了，類似這樣子驗證的還有IEnumerable<Grade>，可以這樣子寫grade.Name[0]，grade.Name[1]。但是這樣子還是有問題，就是我們只能通過class樣式來驗證，如必填項class="required"。改成這樣之後我們要怎麼實現通過類似$("form").validate({options})來配置驗證呢？ 不用急下面來介紹怎麼實現吧。

@using (Ajax.BeginForm("index", "home", new AjaxOptions { OnBegin="onBegin", OnSuccess = "onSuccess" }))
{
    <p>
        若要了解有關 ASP.NET MVC 的更多信息，請訪問 @Html.ActionLink("link me", "about", "home", new { plugin="dialog"})。
    </p>
    <input type="text" style="width:90px;" name="gradeName" />
    <input type="text" style="width:90px;" name="classNmae[0]" class="classname" />
    <input type="text" style="width:90px;" name="classNmae[1]" class="classname" />
    <input type="text" style="width:90px;" name="classNmae[2]" class="classname" />
    <button class="tn-button-primary " type="submit">
        <span class="tn-button-text">提交</span></button>
}
<script type="text/javascript">
    $(function () {
        $("form").validate();//這句是必須的。
        $("input.classname").each(function () {
            $(this).rules("add", {
                required: true,
                number: true,
                messages: {
                    required: "不能爲空",
                    number: "只能是數字"
                }
            });
        });
    })
</script>

這樣子就是現實了。
來一個完整的：

@using (Html.BeginForm("index", "home", FormMethod.Post, new { id="createForm"}))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>創建年級</legend>
        <div class="editor-label">
            年級名稱
        </div>
        <div class="editor-field">
            <input type="text" class="required" style="width:90px;" name="gradeName" />
        </div>

        <div class="editor-label">
            班級1
        </div>
        <div class="editor-field">
            <input type="text" style="width:90px;" name="classNmae[0]" class="classname" />
        </div>
        <div class="editor-label">
            班級2
        </div>
        <div class="editor-field">
            <input type="text" style="width:90px;" name="classNmae[1]" class="classname" />
        </div>
        <div class="editor-label">
            班級3
        </div>
        <div class="editor-field">
            <input type="text" style="width:90px;" name="classNmae[2]" class="classname" />
        </div>
        <p>
            <button class="tn-button-primary " type="submit">
                <span class="tn-button-text">提交</span></button>
        </p>
    </fieldset>
}

<script type="text/javascript">
    $(function () {
        $("#createForm").validate();//這句是必須的。
        $("input.classname").each(function () {
            $(this).rules("add", {
                required: true,
                number: true,
                messages: {
                    required: "不能爲空",
                    number: "只能是數字"
                }
            });
        });
    })
</script>

多選框驗證：

<div class="tnc-select-checkbox tn-helper-clearfix">
    @if (classes != null && classes.Count() > 0)
    {
        foreach (var item in classes)
        {
        <div class="tn-form-row">
            @Html.SipmleCheckBox("classIds", item.Id, htmlAttributes: new { @class = "tn-radiobutton", id = "classId_" + item.Id })
            <label for="@(string.Format("classId_{0}", item.Id))" title="@item.ClassFullName">
                @StringUtility.Trim(item.ClassFullName, 7)</label>
        </div>
        }
    }
</div>

$(function () {
        $("#editForm").validate();
        $("input[name='classIds']").rules("add", {
            required: true,
            messages: {
                required: function () { alert("請至少選擇一個班級。") } 
            }
        });
    });