jQuery中的动态字段验证

Posted 2023-05-09

【中文标题】jQuery中的动态字段验证

【英文标题】：Dynamic field validation in jQuery

【发布时间】：2020-11-09 07:29:37

【问题描述】：

我想使用 jQuery 对表中的 <tr> 进行动态验证。必须对每个字段进行空验证。不应使用验证插件。

表格的html代码：

<table id="stutdent" class="studentForm" border="0">
    <tbody>
        <div class="inputField">
            <tr class="dynamicRow">
                <td>
                    <b><bean:message key="label.student.code" />:</b>
                </td>
                <td class="studentCreateSelect">
                    <html:select property="studentCreate" styleId="studentCreateSelect" >
                        <html:option value="">
                            <bean:message key="label.student.code.select" />
                        </html:option>
                        <html:option value="A">A</html:option>
                        <html:option value="B">B</html:option>
                        <html:optionsCollection name="studentForm" property="studentList" label="label" value="value" />
                    </html:select>
                </td>
            </tr>
        </div>
        <div class="inputField">
            <td>
                <b><bean:message key="label.student.name" />:</b>
            </td>
            <td class="sNameList">
                <html:text property="sNameList" name="studentForm" styleId="sNameList" size="10" maxlength="6"></html:text>
            </td>
        </div>

点击Add 时，会动态添加行。我可以对第一行进行验证，但不能动态验证。请帮忙。

我的添加代码：

function addRow() 
    var $rowObj = $("#stutdent tr:first");
    $rowObj.clone().insertAfter($rowObj);
    $('.add_btn', $rowObj).replaceWith('<button id="remove_row" onclick="delRow(this)">Del</button>'); // Remove the button from the previous tr, otherwise each row will have it.

Able to validate messages dynamically
My new issue: Messages are not shown under the field but getting displayed next to it
It has to be shown below each field

Kindly help
My validation code :

    function validateNewDockGate(fromScreen)
    $("tr.dynamicRow").each(function() 
                    var d = $(this).find(".studentCreateSelect").val();
                    if(d === "")
                     valid = false;
                     $(this).find(".studentCreateSelect").after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please select Student id</div>");
                     var e = $(this).find(".sNameList").val();
                    if(e === "")
                     valid = false;
                     $(this).find(".sNameList").after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please select Student id</div>");
            );
    

【问题讨论】：

使用深度克隆，它也会复制偶数处理程序。喜欢$rowObj.clone(true).insertAfter($rowObj);

好的..如何为下拉/文本字段添加验证？

我的验证代码部分： $("tr.dynamicRow").each(function() var d = $("#studentCreateSelect").val(); if($("#studentCreateSelect ").val() === "") valid = false; $("#studentCreateSelect").after("请选择学生编号"); );

您的第一个问题解决了吗？

我的问题是动态添加字段验证。正在添加行，但验证无法动态进行。只需进行表单验证，主要检查任何字段中的值是否不为空。请建议。

【参考方案1】：

当您有多个元素时，您应该切换到类选择器（ID 选择器仅对第一次出现有效）。所以把#studentCreateSelect改成.studentCreateSelect然后：

$("tr.dynamicRow").each(function()  
    var d = $(this).find(".studentCreateSelect").val(); 
    if(d === "") 
        valid = false; 
        $(this).after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please select Student id</div>"); 
    
); 

如果你不能编辑和添加类到这些元素，你可以简单地使用标签选择器来代替：

var d = $(this).find("select").val();

注意： .after 对 TR 元素无效。它会破坏表结构。您还需要找到另一种显示警报的方法，例如在 select 元素之后添加警报..

【讨论】：

我没有名为 studentCreateSelect 的类属性。下面是我的下拉代码

: A B html:select>

对多个元素使用相同的 ID 无效，但我的答案也可能适用于 ID 选择器，因为它在单个 TR 中使用 .find 并且没有多个 ID。@Padmaja

在我的情况下，我们确实有多个 ID。如何显示多个 ID 的验证消息？

一个表格行包含一组下拉列表和文本框。如何在每个字段下单击保存时动态显示验证消息。

【参考方案2】：

我的问题的答案： var student = $(this).find(".studentCreateSelect").val(); 使用它可以动态验证消息。