[英]Dynamic field validation in jQuery
I want to do dynamic validation for a <tr>
in a table using jQuery.我想使用 jQuery 对表中的
<tr>
进行动态验证。 Have to do null validation for each field.必须对每个字段进行 null 验证。 Validate plugin should not be used.
不应使用验证插件。
HTML code for table:表格的 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>
On click of Add
, rows are getting added dynamically.单击
Add
后,将动态添加行。 I'm able to do validation for the first row but not dynamically.我可以对第一行进行验证,但不能动态验证。 Kindly help.
请帮忙。
My code for 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>");
});
}
When you have multiple elements you should switch to Class selector (ID selector is just valid for first occurance).当您有多个元素时,您应该切换到 Class 选择器(ID 选择器仅对第一次出现有效)。 So change
#studentCreateSelect
to .studentCreateSelect
and then:因此,将
#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>");
}
});
If you can not edit and add class to those elements, You may simply use Tag selector instead:如果您无法编辑 class 并将其添加到这些元素,您可以简单地使用标签选择器:
var d = $(this).find("select").val();
Note: .after
is not valid usage for TR element.注意:
.after
对 TR 元素无效。 It will break the table structure.它会破坏表结构。 You also need to find another method to show alert eg adding the alert after the select element..
您还需要找到另一种显示警报的方法,例如在select元素之后添加警报。
The answer for my question: var student = $(this).find(".studentCreateSelect").val();我的问题的答案: var student = $(this).find(".studentCreateSelect").val(); Using this able to validate messages dynamically.
使用它可以动态验证消息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.