jQuery auf blur funktioniert nicht richtig

Habe ich eine einfache Bildungs-details-Seite, wo ich bin, generieren von Textboxen dynamisch eingeben Qualifizierung details. Wenn ich versuche, die zur Validierung der Textfelder, die Validierung gefeuert wird, aber nicht richtig. Wenn ich versuche es 2-3 mal, dann wird es richtiger. In den ersten versuchen alternativer Textfelder überprüft erhalten. Wenn ich auf "Zeile hinzufügen" - Taste eine neue Zeile Hinzugefügt wird, aber wenn ich versuche zu überprüfen, für 2-3 versuche den Fehler bei der überprüfung nicht angezeigt. Nach ein paar mehr versuchen, die Validierung funktioniert. Es ist alles sehr verwirrend.

Recherchierte ich viel im internet, aber konnte keine richtige Lösung.

Ich eingefügt haben meine volle JSP unten. Wird wirklich sehr dankbar für jegliche Hinweise.

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

Vielen Dank im Voraus.

InformationsquelleAutor sweta mulgavker | 2013-10-10

7

Seit Sie erstellen diese Elemente dynamisch, versuchen delegieren Sie Ihre Veranstaltungen:
```
jQuery(document).on("blur",".validate-text", function (event) { 
//repeat for ".validate-num"
```
Zusätzlich, sollten Sie sich nicht über zwei verschiedene Versionen von jQuery. Entfernen <script src="../js/jquery-1.3.2.js" type="text/javascript"></script>

InformationsquelleAutor Blazemonger

Anstatt blur .. haben Sie versucht, mit 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>

Lesen Sie mehr über focusout hier:

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

großen Unterschied zwischen focusout und blur ist, dass blur support event-bubbling.

Den focusout-Ereignis an ein element, wenn es, oder ein beliebiges element innerhalb der it, den Fokus verliert. Dies unterscheidet sich von der blur-Ereignis, es unterstützt die Erkennung der Verlust des Fokus auf untergeordnete Elemente (in anderen Worten, es unterstützt Ereignis-bubbling).