jQuery中的动态字段验证

Question

我想使用 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>");
            });
    }

Answer 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 元素之后添加警报..

Answer 2

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