使用 jQuery 验证 div 内的所有输入字段

Posted 2023-05-08

【中文标题】使用 jQuery 验证 div 内的所有输入字段

【英文标题】：Validate all input fields inside a div using jQuery

【发布时间】：2017-11-27 13:56:59

【问题描述】：

我正在使用下面的 jQuery 函数来验证 div 中的所有字段。我的问题是即使我填写了所有字段，它也总是返回 false。

function validate(id) 
            //:text, :checkbox, select, textarea
            var isFormValid = true;
            var div = $(id);
            $(div).find(":text, select").each(function () 
                if (this.value == "" && !$(this).hasClass("no-req")) 
                    $(this).addClass("required");
                    isFormValid = false;
                    $(this).focus();
                
                else 
                    $(this).removeClass("required");
                
            );
            if (!isFormValid) 
                alert("Please fill all the higlighted fields!");
            
            return isFormValid;

        

在 Asp.net 按钮客户端单击我正在使用此代码

 <asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-success" OnClientClick="javascript: return validate('#tdAdd');"   OnClick="btnSave_Click" />

【问题讨论】：

你试过OnClientClick="validate('#tdAdd');"

该功能似乎工作正常 -> jsfiddle.net/s5rfhsa9/1

请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。

【参考方案1】：

改变这个：

$(div).find(":text, select").each(function () 
    if (this.val() == "" && !$(this).hasClass("no-req")) 

收件人：

div.find(":text, select").each(function () 
    if ($(this).val() == "" && !$(this).hasClass("no-req")) 

【讨论】：

问题标记为 jQuery，这不是 jQuery。 ***.com/questions/4524702/…

【参考方案2】：

为什么不使用内置的 aspnet 自定义验证器？然后，您可以搜索特定 div 内的所有 TextBox，并返回 Validator 值。

<div id="validateTheseControls">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />

    <asp:CustomValidator ID="CustomValidator1" runat="server" 
    ClientValidationFunction="validateControlsInDiv" ErrorMessage="Not all fields are filled"></asp:CustomValidator>
</div>

<script type="text/javascript">
    function validateControlsInDiv(sender, element) 
        var isValid = true;

        $('#validateTheseControls input[type="text"]').each(function () 
            if ($(this).val() == "") 
                isValid = false;
            
        );

        element.IsValid = isValid;
    
</script>