Question

我有一个简单的教育详细信息页面，我动态生成文本框以输入资格详细信息。当我尝试验证文本框时，验证会被触发但不正确。如果我尝试2-3次，那就变得合适了。在第一次尝试中，备用文本框得到验证。当我点击“添加行”按钮时，会添加一个新行，但是当我尝试验证它2-3次尝试时，不会显示验证错误。经过几次尝试后，验证工作正常。这一切都非常令人困惑。

我在互联网上进行了很多研究，但找不到合适的解决方案。

我在下面粘贴了完整的JSP。任何指针真的非常感谢。

 <%@ 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>

提前致谢。

Answer 1

由于您是动态创建这些元素，请尝试delegating your events：

jQuery(document).on("blur",".validate-text", function (event) { 
// repeat for ".validate-num"

此外，您不应该使用两个不同版本的jQuery。删除<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>

Answer 2

您尝试使用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>

在此处详细了解focusout：

http://api.jquery.com/focusout/

focusout与模糊之间的主要区别在于blur支持事件冒泡。

当焦点事件或其中的任何元素失去焦点时，会将焦点事件发送到元素。这与模糊事件不同，因为它支持检测后代元素的焦点丢失（换句话说，它支持事件冒泡）。

它通常与focusin

一起使用

codepen或jsfiddle示例也很有帮助

关于模糊的jQuery无法正常工作

2 个答案: