Jquery 动态场验证未命中火灾

Jquery 动态场验证未命中火灾,jquery,jsp,validation,Jquery,Jsp,Validation,我有一个jsp页面,它有两个选项卡,每个选项卡都有一个单独的表单。在第二个选项卡表单中,我使用文本框生成动态行。我通过在文本字段上应用类添加了验证。正在为动态字段触发代码验证,但当我输入正确的值时,验证错误消息不清除 代码粘贴在下面 <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBL

我有一个jsp页面,它有两个选项卡,每个选项卡都有一个单独的表单。在第二个选项卡表单中,我使用文本框生成动态行。我通过在文本字段上应用类添加了验证。正在为动态字段触发代码验证,但当我输入正确的值时,验证错误消息不清除

代码粘贴在下面

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="css/simpletabs.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.validate.css" />

<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" src="js/simpletabs_1.3.js"></script>
<style type="text/css">
           .adHeadline {font: bold 10pt Arial; text-decoration: underline; color: #003366;}
           .adText {font: normal 10pt Arial; text-decoration: none; color: #000000;}
        </style>

        <script type="text/javascript">       
       $(document).ready(function(){
           jQuery(document).on("blur",".validate-text", function (event) {
             jQuery(".validate-text").validate({
            expression: "if (VAL) return true; else return false;",
            message: "Only characters allowed."
            });
        });
           jQuery(document).on("blur",".validate-num", function (event) {
               jQuery(".validate-num").validate({
            expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
            message: "Only numbers allowed."
            });
    });
           jQuery("#genderRad").validate({
               expression: "if (isChecked(SelfID)) return true; else return false;",
               message: "Select one option."
           });

           jQuery("#emailTxt").validate({
               expression: "if (VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9_]+(\\.[a-zA-Z0-9_]+)*\\.[a-zA-Z]{2,4}$/)) return true; else return false;",
               message: "Enter a valid email-id."
           });
       });
        </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" name="marksTxt'+i+'" id="marksTxt'+i+'" /></td>'+
                    '<td class="MasterTabletd"><input type="text" class="validate-num" name="totalTxt'+i+'" id="totalTxt'+i+'"  /></td>'+
                    '<td class="MasterTabletd"><input type="text" name="percentageTxt'+i+'" id="percentageTxt'+i+'" /></td>'+
                    '<td class="MasterTabletd"><input type="text" class="validate-num" 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>

<div class="simpleTabs">
                <ul class="simpleTabsNavigation" id="tab1">
                    <li><a href="#">Personal Details</a></li>
                    <li><a href="#">Educational Details</a></li>  
                </ul>
                <div class="simpleTabsContent">

                <form id="personalDetails" class="MasterForm" method="post" action="InsertData?add=personal">

    <p>${message}</p>
    <%
        session.setAttribute("message","");
    %>
<table class="MasterTable">
    <tr>
        <td class="MasterTabletd"><label class="MasterLabel">First Name
        :<span class="required">*</span></label></td>
        <td class="MasterTabletd"><input type="text"  class="validate-text" 
            name="fNameTxt" id="fNameTxt" /></td>
    </tr>
    <tr>
        <td class="MasterTabletd"><label class="MasterLabel">Last Name
        :<span class="required">*</span></label></td>
        <td class="MasterTabletd"><input type="text"   class="validate-text" 
            name="lNameTxt" id="lNameTxt" /></td>
    </tr>
    <tr>
        <td class="MasterTabletd"><label class="MasterLabel">Age
        :<span class="required">*</span></label></td>
        <td class="MasterTabletd"><input type="text"  class="validate-num"  
            name="ageTxt" id="ageTxt" /></td>
    </tr>
    <tr>
        <td class="MasterTabletd"><label class="MasterLabel">Gender
        :<span class="required">*</span></label></td> 
        <td class="MasterTabletd">
        <input type="radio" checked="checked" name="genderRad" id="genderRad_M" value="M" />Male
        <input type="radio" name="genderRad" id="genderRad_F" value="F" />Female
        </td>
    </tr>
    <tr>
        <td class="MasterTabletd"><label class="MasterLabel">Mobile No
        :<span class="required">*</span></label></td>
        <td class="MasterTabletd"><input type="text" class="validate-num"  
            name="mobileNoTxt" id="mobileNoTxt" /></td>
    </tr>
    <tr>
        <td class="MasterTabletd"><label class="MasterLabel">Email
        :<span class="required">*</span></label></td>
        <td class="MasterTabletd"><input type="text" 
            name="emailTxt" id="emailTxt" /></td>
    </tr>
    <tr>
        <td class="MasterTabletd" colspan="2" style="text-align: center;">
        <input type="submit" name="personal" id="personal" class="submitbutton" value="Submit" /></td>
    </tr>
</table>
</form> </div>
                <div class="simpleTabsContent"  id="tab2">

                <form id="educationalDetails" class="MasterForm" method="post"
    action="AddPersonalDetails.php">
<table class="MasterTable">
    <tr><td class="MasterTabletd" colspan="6" style="text-align: left;">
    <input type="button" name="addRow" id="addRow" class="submitbutton"  value="Add Row" /></td>
    <td class="MasterTabletd">
    </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-num"  /></td>
    </tr>
</table>
<input type="submit" name="educational" id="educational" class="submitbutton" value="Submit" /></td>
    <br></br>
<input type="hidden" name="countHd" id="countHd" value="1" />
</form>

                </div>
            </div>
    </div>          

         </body>
</html>
这是我以前的文章中提到的方法

在第二页上测试验证时,第一页上的验证也会被触发。如何避免这种情况?有没有更好的方法来实现同样的功能

我将感谢任何帮助

提前谢谢