jQuery на размытие не работает должным образом

У меня есть простая страница образовательных данных, в которой я динамически генерирую текстовые поля, чтобы ввести данные о квалификации. Когда я пытаюсь проверить текстовые поля, проверка выполняется, но не правильно. Если я попробую это 2-3 раза, тогда это станет правильным. В первую очередь проверяются альтернативные текстовые поля. Когда я нажимаю кнопку «добавить строку», добавляется новая строка, но когда я пытаюсь проверить ее на 2-3 попытки, ошибка проверки не отображается. После нескольких попыток валидация работает. Все это очень запутанно.jQuery на размытие не работает должным образом

Я много исследовал в Интернете, но не нашел подходящего решения.

Я наклеил свой полный 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>

Заранее спасибо.

источник

2013-10-10 sweta mulgavker

Поскольку вы создаете эти элементы динамически, попробуйте 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>

источник

2013-10-10 17:16:13 Blazemonger

Вместо использования 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 например, было бы полезно также

источник

2013-10-10 17:20:05

jQuery на размытие не работает должным образом

ответ

Смежные вопросы