模糊上的jQuery无法正常工作
我有一个简单的教育详细信息页面,我在其中动态生成文本框以输入资格详细信息。当我尝试验证文本框时,会触发验证,但验证不正确。如果我试了2-3次,它就变得合适了。在第一次尝试中,将验证备用文本框。当我点击“添加行”按钮时,会添加一个新行,但当我尝试验证它2-3次时,验证错误不会显示。再尝试几次之后,验证工作就开始了。这一切都很令人困惑 我在网上做了很多研究,但没有找到合适的解决办法 我已将完整的JSP粘贴到下面。我真的非常感谢你的指点模糊上的jQuery无法正常工作,jquery,validation,dynamic,blur,Jquery,Validation,Dynamic,Blur,我有一个简单的教育详细信息页面,我在其中动态生成文本框以输入资格详细信息。当我尝试验证文本框时,会触发验证,但验证不正确。如果我试了2-3次,它就变得合适了。在第一次尝试中,将验证备用文本框。当我点击“添加行”按钮时,会添加一个新行,但当我尝试验证它2-3次时,验证错误不会显示。再尝试几次之后,验证工作就开始了。这一切都很令人困惑 我在网上做了很多研究,但没有找到合适的解决办法 我已将完整的JSP粘贴到下面。我真的非常感谢你的指点 <%@ page language="java" con
<%@ 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>
输入详细信息
$(文档).ready(函数(){
jQuery(“.validate text”).on(“blur”,函数(事件){
setTimeout(函数(){
jQuery(“.validate text”).validate({
表达式:“if(VAL)返回true;else返回false;”,
消息:“请输入值。”
}); });
});
jQuery(“.validate num”).on(“blur”,函数(事件){
setTimeout(函数(){
jQuery(“.validate num”).validate({
表达式:“如果(!isNaN(VAL)&&VAL)返回true;否则返回false;”,
消息:“请输入值。”
});
});
});
});
$(文档).ready(函数(){
$(“#添加行”)。单击(函数(){
var i=0;
i=$(“#countHd”).val();
i=parseInt($(“#countHd”).val(),10);
$(“表格”)。附加(“”)+
''+
''+
''+
''+
''+
''+
'');
i=i+1;
$(“#countHd”).val(i);
});
});
输入详细信息
课程名称*
董事会/大学*
获得的分数*
总分*
百分比*
竣工年份*
提前感谢。由于您是在动态创建这些元素,请尝试:
此外,您不应该使用两个不同版本的jQuery。删除
而不是使用blur
。。您是否尝试过使用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>
$(文档).ready(函数(){
jQuery(“body”).on(“focusout”,“.validate text”,函数(事件){
setTimeout(函数(){
jQuery(“.validate text”).validate({
表达式:“if(VAL)返回true;else返回false;”,
消息:“请输入值。”
});
});
});
jQuery(“body”).on(“focusout”,“validate num”,函数(事件){
setTimeout(函数(){
jQuery(“.validate num”).validate({
表达式:“如果(!isNaN(VAL)&&VAL)返回true;否则返回false;”,
消息:“请输入值。”
});
});
});
});
阅读更多关于聚焦输出的信息,请点击此处:
和模糊的主要区别在于支持事件冒泡
当某个元素或其中的任何元素失去焦点时,focusout事件被发送到该元素。这与模糊事件不同,因为它支持检测子元素上的焦点丢失(换句话说,它支持事件冒泡)
它常与动词连用
codepen或jsfiddle示例也会有所帮助
<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>