DropDownList控制項的資料驗証 - 使用RequiredFieldValidator & jQuery Validation Plugin

在設計下拉式選單時，常需要將第一個選項設計成"請選擇xxx"，在送出表單前會檢查使用者是否有選擇選單裡的其它選項，我們可以ASP.NET 內建的 RequiredFieldValidator 控制項或是jQuery的Validation Plugin來達到驗証的功能。

1. RequiredFieldValidator

<asp:DropDownList ID="DropDownList" runat="server" DataSourceID="ObjectDataSource" DataTextField="ApplicationName" DataValueField="ApplicationId">
 <asp:ListItem Value="-1">請選擇</asp:ListItem>
 <asp:ListItem Value="選項一之值">選項一</asp:ListItem>
 <asp:ListItem Value="選項二之值">選項二</asp:ListItem>
 <asp:ListItem Value="選項三之值">選項三</asp:ListItem>
</asp:DropDownList>

<asp:RequiredFieldValidator ID="RequiredFieldValidator" runat="server" ControlToValidate="DropDownList" Display="Dynamic" ErrorMessage="請選擇下拉式選單" SetFocusOnError="True" InitialValue="-1"></asp:RequiredFieldValidator>

由以上程式碼片段可以看到，我們設定 RequiredFieldValidator 的InitialValue屬性值與DropDownList的第一個選項"請選擇"之值相同^註1。當表單送出時會自動檢查下拉式選單所選選項之值是否與 RequiredFieldValidator 相同，如果相同則表單停止送出。

2. jQuery Validation Plugin
(1) 將"請選擇"選項之值設為空字串
(2) 加入以下code snippet

<script language="javascript" type="text/javascript">
    $(function() {
        $("#<%= this.Form.ClientID %>").validate({
            rules: {
            <%= this.DropDownList.UniqueID %>: {required: true}
            },
            messages:{
            <%= this.DropDownList.UniqueID %>: { required: "請選擇下拉式項單"}
            }
        });
    });
</script>

備註
1.也可將"請選擇"選項之值設為空字串，拿掉 RequiredFieldValidator 的InitialValue一樣能執行驗証