单击按钮时的JQuery Validate下拉选择

Question

我在验证单击按钮时的下拉ASP控件时遇到问题。 我有一个面板，其中包含单选按钮，文本框，下拉菜单和保存按钮。 如果选择了zip单选按钮，则会显示一个下拉列表（该列表与后面代码中的数据绑定在一起），您必须从列表中选择一个zip。 我在验证单击保存按钮的按钮时遇到了麻烦，该按钮是从下拉列表中进行选择的。 我想使用jQuery并尝试这样做，以使其弹出并发出警报，但无法正常工作。 希望它先对选择进行验证，然后再对按钮的onClick进行验证。

<script type="text/javascript">
$(document).ready(function() {
    $('#btn_submit').click(function() {
        if ($('#ZIPDD').val() > 0) {
            return true;
        }
        else {
            alert('Please select a zip.');
            return false;
        }
    });

});

<asp:UpdatePanel runat="server" ID="UP6" ChildrenAsTriggers="false" UpdateMode="conditional">
<ContentTemplate>
    <table style="text-align:center;" cellpadding="5px">
        <tr>
            <td>
                <table runat="server" id="_table" width="100%" cellspacing="10">
                    <tr>
                        <td style="width:100px; font-weight:bold; padding-bottom:inherit;" valign="middle">
                            <div>STEP 1:</div>
                            <div>Enter a #</div>
                        </td>
                        <td align="left" valign="middle" style=" margin-bottom:15px;">
                            <asp:TextBox runat="server" ID="txt_nbr" Width="70px"/>
                            <asp:Button ID="Button1" Text="Continue" runat="server" OnClick="Button1_Click"/>
                        </td>
                    </tr>
                     <tr>
                        <td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">                              
                        </td>
                        <td style="border:2px solid gray; background-color:Silver;">
                            <table runat="server" id="SHTable" visible="false" width="100%">
                                <tr align="left">
                                    <th style="font-weight:bold;border-bottom:2px solid black;">Methods</th>
                                    <th style="font-weight:bold;border-bottom:2px solid black;">Location</th>
                                    <th style="font-weight:bold;border-bottom:2px solid black;">&nbsp;<asp:Label runat="server" ID="DOTEXT"></asp:Label></th>
                                </tr>
                                <tr align="left">
                                    <td>
                                        <div style="margin-bottom:10px;"><asp:CheckBox runat="server" ID="ZIP" Text="ZIP" AutoPostBack="true" OnCheckedChanged="ZIP_CheckedChanged" /></div>
                                    </td>
                                    <td style="width:300px;">
                                        <asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/><br /><asp:Label ID="ziplabel" Visible="false" runat="server" style="color: red; font-size:12px;"/>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                     <tr>
                        <td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
                            <div>Confirm changes and hit save</div>    
                        </td>
                        <td align="left" valign="middle">
                            <asp:Button Text="Save" runat="server" ID="btn_submit" OnClick="btn_submit_Click" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>
</ContentTemplate>

绑定到页面加载背后的代码中的下拉列表

      protected void Page_Load(object sender, EventArgs e)
{
    if (ZIPDD.Items.Count == 0)
    {
        Loadzips();
    }
}
private void LoadBranches()
{
    using (SqlConnection SQLCONN)
    {
        SQLCONN.Open();
        SqlCommand SQLCOMM = SQLCONN.CreateCommand();
        SQLCOMM.CommandText = "SELECT * FROM table";
        IDataReader dr = SQLCOMM.ExecuteReader();
        ZIPDD.DataSource = dr;
        ZIPDD.DataValueField = "ZIPID";
        ZIPDD.DataTextField = "ZIPLABEL";
        ZIPDD.DataBind();
        ZIPDD.Items.Insert(0, new ListItem(String.Empty, String.Empty));
        ZIPDD.SelectedIndex = 0;
    }
}

Answer 1

您为什么不使用jQuery.validate插件呢？ 它将验证所有附加了“必需”类的表单项。 如果选中复选框，则可以使用jQuery和addClass将所需的类添加到下拉列表中。

if($('#radio_button').is(':checked')) { 
$( ".dropDownClassIdentifier" ).addClass( "required" );
}
else
{
$( ".dropDownClassIdentifier" ).removeClass( "required" );
}

http://jqueryvalidation.org/和http://api.jquery.com/addClass/是开始查找文档的好地方

Answer 2

当您计划使用javascript / jquery时，请注意控件在客户端的呈现方式。 您正在为表和控件设置visible="false" ，它们将永远不会在客户端呈现。 您无法使用jquery找到它们。 为了正常工作，您需要设置以下内容：

<table runat="server" id="SHTable" visible="false" width="100%">

对此：

<table runat="server" id="SHTable" style="display:none" width="100%">

并更改此：

<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/>

对此：

<asp:DropDownList runat="server" ID="ZIPDD" style="display:none"/>

要测试您的脚本，请为表和下拉菜单设置style="display:block" ，否则您将看到porpup选择一个zip文件（下拉值为0）。

祝好运！