Question

我尝试对gridview中的某些下拉列表执行验证。
当用户在没有选择选项的情况下单击按钮时，应该提示用户提示未选择下拉列表的警告消息。

我的gridview控件包含三列：

复选框
标签控制
下拉列表

我只想在下拉列表中执行验证，复选框选中该行。问题是它会对所有下拉列表执行验证，无论是否选中该复选框。

jQuery的：

$("#btnStartExam").click(function (evt) {
    debugger;
    ($("#grdEnglish option:selected")).each(function () {
        if ($("#grdEnglish input[type='checkbox']").is(':checked') && ($(this).val() == 'Select Year')){
            alert('Select year');
            ($(this).parent().css("background-color", "red"));
        }
    });
});

HTML：

 <asp:PlaceHolder runat="server" ID="placeholderSubjects">
 <div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="col-md-8 col-sm-8 col-xs-8">
            <p>COMPULSORY SUBJECT</p>
            <asp:GridView runat="server" ID="grdEnglish" AutoGenerateColumns="false" ClientIDMode="Static" CssClass="table table-hover table-responsive table-bordered">
                <Columns>

                    <asp:TemplateField HeaderText="SUBJECTS" HeaderStyle-CssClass="text-center" ItemStyle-CssClass="text-center">
                        <ItemTemplate>
                            <asp:CheckBox ID="chk" runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="SUBJECTS" HeaderStyle-CssClass="text-center" ItemStyle-CssClass="text-center">
                        <ItemTemplate>
                            <asp:Label ID="lbl" Text='<%#Eval("sub")%>' runat="server" />
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="EXAMINATION YEAR" HeaderStyle-CssClass="text-center" ItemStyle-CssClass="text-center">
                        <ItemTemplate>
                            <asp:DropDownList ID="drp" runat="server" CssClass="form-control" >
                                <asp:ListItem Value="Select Year">Select Year</asp:ListItem>
                            </asp:DropDownList>
                        </ItemTemplate>
                    </asp:TemplateField>

                </Columns>
            </asp:GridView>
            <asp:Button ID="btnStartExam" runat="server" Text="START EXAMINATION" ClientIDMode="Static" />

Answer 1

在处理每个选定的选项时，需要引用您所在的行。使用.closest（'tr'）调用来获取选项所在的行，然后根据该行查找输入。我还建议以不同的方式处理错误。也许在数组或对象中跟踪它们，然后在循环外的末尾执行一个警报。

$("#btnStartExam").click(function (evt) {
    evt.preventDefault();    // without this it will submit
    ($("#grdEnglish option:selected")).each(function () {
        var row = $(this).closest('tr');
        if (row.find("input[type='checkbox']").is(':checked') && ($(this).val() == 'Select Year')) {
            alert('Select year');
            (row.css("background-color", "red"));
        }
    });
});

顺便说一下，由于您在这里使用ASP.Net，您是否考虑过使用ASP CustomValidator？这将允许您直接设置表单的有效状态。

你可以把这个功能放在脑子里，而不是你的jQuery：

function validateRow(src, args) {
    var row = $(src).closest('tr');
    var chk = row.find("input[type='checkbox']")[0];
    if (chk.checked  && args.Value == 'Select Year') {
        args.IsValid = false;
    }
    else { args.IsValid = true;}
}

在DropDownList下面添加如下内容：

<asp:CustomValidator runat="server" ID="customYearValidator" ControlToValidate="drp" ErrorMessage="Please select a year" ClientValidationFunction="validateRow"></asp:CustomValidator>

如果选中位于同一行的复选框，则如何验证下拉列表

1 个答案: