问题
I have a simple educational details page where I am generating textboxes dynamically to enter qualification details. When I try to validate the textboxes, the validation gets fired but not properly. If I try it 2-3 times then it becomes proper. In the first attempt alternate textboxes get validated. When I click on "add row" button a new row gets added but when I try to validate it for 2-3 attempts the validation error is not shown. After few more attempts the validation works. It is all very confusing.
I researched a lot on the internet but could not find any proper solution.
I have pasted my full JSP below. Will be really really thankful for any pointers.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enter Details</title>
<link rel="stylesheet" type="text/css" href="../css/jquery.validate.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.validation.functions.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery(".validate-text").on("blur", function (event) {
setTimeout(function() {
jQuery(".validate-text").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter value."
}); });
});
jQuery(".validate-num").on("blur", function (event) {
setTimeout(function() {
jQuery(".validate-num").validate({
expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
message: "Please enter value."
});
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#addRow").click(function() {
var i=0;
i= $("#countHd").val();
i= parseInt($("#countHd").val(),10);
$("table").append('<tr>'+
'<td class="MasterTabletd"><input type="text" class="validate-text" name="courseTxt'+i+'" id="courseTxt'+i+'" /></td>'+
'<td class="MasterTabletd"><input type="text" class="validate-text" name="boardTxt'+i+'" id="boardTxt'+i+'" /></td>'+
'<td class="MasterTabletd"><input type="text" class="validate-num" style="width: 80px;" name="marksTxt'+i+'" id="marksTxt'+i+'" /></td>'+
'<td class="MasterTabletd"><input type="text" class="validate-num" style="width: 80px;" name="totalTxt'+i+'" id="totalTxt'+i+'" /></td>'+
'<td class="MasterTabletd"><input type="text" style="width: 80px;" name="percentageTxt'+i+'" id="percentageTxt'+i+'" style="width: 80px;" /></td>'+
'<td class="MasterTabletd"><input type="text" class="validate-text" style="width: 80px;" name="classTxt'+i+'" id="classTxt'+i+'" /></td>'+
'</tr>');
i=i+1;
$("#countHd").val(i);
});
});
</script>
</head>
<body>
<div id="contain">
<div id="header">
<h3>Enter Details</h3>
</div>
<form id="personalDetails" class="MasterForm" method="post"
action="AddPersonalDetails.php">
<table class="MasterTable">
<tr><td class="MasterTabletd">
<input type="button" name="addRow" id="addRow" class="submitbutton" value="Add Row" /></td>
<td class="MasterTabletd">
<input type="submit" name="educational" id="educational" class="submitbutton" value="Submit" /></td>
</tr>
<tr>
<td>Course Name<span class="required">*</span></td>
<td>Board / University<span class="required">*</span></td>
<td>Marks Obtained<span class="required">*</span></td>
<td>Total Marks<span class="required">*</span></td>
<td>Percentage<span class="required">*</span></td>
<td>Year of Completion<span class="required">*</span></td>
</tr>
<tr>
<td class="MasterTabletd"><input type="text" name="courseTxt" id="courseTxt" class="validate-text" /></td>
<td class="MasterTabletd"><input type="text" name="boardTxt" id="boardTxt" class="validate-text" /></td>
<td class="MasterTabletd"><input type="text" name="marksTxt" id="marksTxt" class="validate-num" /></td>
<td class="MasterTabletd"><input type="text" name="totalTxt" id="totalTxt" class="validate-num" /></td>
<td class="MasterTabletd"><input type="text" name="percentageTxt" id="percentageTxt" /></td>
<td class="MasterTabletd"><input type="text" name="classTxt" id="classTxt" class="validate-text" /></td>
</tr>
</table>
<input type="hidden" name="countHd" id="countHd" value="1" />
</form>
</div>
</body>
</html>
Thanks in advance.
回答1:
Since you're creating those elements dynamically, try delegating your events:
jQuery(document).on("blur",".validate-text", function (event) {
// repeat for ".validate-num"
Additionally, you shouldn't be using two different versions of jQuery. Remove <script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
回答2:
Instead of using blur .. have you tried using focusout
<script type="text/javascript">
$(document).ready(function(){
jQuery("body").on("focusout", ".validate-text", function (event) {
setTimeout(function() {
jQuery(".validate-text").validate({
expression: "if (VAL) return true; else return false;",
message: "Please enter value."
});
});
});
jQuery("body").on("focusout", ".validate-num", function (event) {
setTimeout(function() {
jQuery(".validate-num").validate({
expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
message: "Please enter value."
});
});
});
});
</script>
Read more about focusout here:
http://api.jquery.com/focusout/
major difference between focusout and blur is that blur support event bubbling.
The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
it is often used with focusin
an codepen or jsfiddle example would be helpful also
来源：https://stackoverflow.com/questions/19302073/jquery-on-blur-not-working-properly