동적으로 추가 된 요소에 유효성 검사 규칙 추가

동적으로 생성 된 양식의 요소를 확인하려고합니다. 그러나 아래 코드에 규칙 ('$("#email"+index).rules("add", { required:true,email:true });')을 추가하는 코드가 작동하지 않는 것 같습니다 (예 : 응답 없음).동적으로 추가 된 요소에 유효성 검사 규칙 추가

내가 뭘 잘못하고 있니? (이 추가 규칙 코드의 경우 예를 들어 페이지 뷰 소스 : http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm을 사용하고 document.ready 함수의 처음에 .validate()를 추가했습니다. 예를 들어 jQuery - How to dynamically add a validation rule에 제안 된 규칙을 추가하기 전에,

<html> 
<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" ></script> 
    <script type="text/javascript" src="/jquery/jquery.validate.js"></script> 
    <script type="text/javascript" src="js/additional-methods-v2.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      var wrapper = $("#wrapper"); 
      var addForm = $("#add-form"); 
      var index = 0; 

      $("#myForm").validate(); 

      var getForm = function(index, action) { //returns set of form fields as a string 
      return $('\ 
       <table>\ 
       <tr>\ 
       <td> Name </td> <td> Email </td> <td> Phone </td>\ 
       </tr>\ 
       <tr>\ 
       <td> <input id="name' + index + '" name="name' + index + '" /></td>\ 
       <td><input id="email' + index + '" name="email' + index + '" /></td>\ 
       <td><input id="phone' + index + '" name="phone' + index + '" /></td>\ 
       <input type="submit" value="Save">\ 
       </tr>\ 
       </table>\ 
       <a href="#" class="remove">remove form</a>\ 
       '); 
      }//getForm() 

      addForm.on("click", function() { 
       var form = getForm(++index) 
       form.find(".remove").on("click", function() { 
        $(this).parent().remove(); 
       }); //form.find() 
       $("#wrapper").append(form); 
       $("#email"+index).rules("add", { required:true,email:true }); 
      }); //addForm.on() 


      $("#myForm").validate({ 
    //console.log("validate"); 

       errorPlacement: function(error, element) { 
      error.insertAfter(element); 
        }, 
       rules: { 
         email: { 
      required: true 

     } 
       } //rules 

    }); //validate() 

     }); //$(document).ready 
    </script> 


</head> 
<body> 
    <form id="myForm" name="myForm" action="" method="post" autocomplete="on"> 
     <div id="wrapper"></div> 
     <a href="#" id="add-form">add form</a> 
    </form> 

</body> 
</html>

출처

2013-08-30 Joppo

이는 http://stackoverflow.com/questions/3033910/jquery-하기 전에 물어되었습니다 ... rules 선언을 제거해야 동적으로 추가하는 방법 - 유효성 검사 규칙 –

이 올바른지 확인하기 위해이 링크를 참조했으며 규칙을 추가하기 전에 .validate()를 추가하는 것이 효과가없는 것으로 나타났습니다. '$ ("# myForm")을 추가했습니다. validate();' '$ ("# email"+ index) .rules ("add", {required : true, email : true}); 또한 validate line을 documenten ready 기능의 시작 부분에 두어 시험해 보았다. 나는 또한 다음과 같은 질문을 할 수있다. $ ("# myForm"). validate() 행을 넣는 코드가 정확히 어디에 있는지 (오류 일 경우)? – Joppo

당신은 두 번 $("#myForm").validate()를 호출 :

코드() 간단한 형태로하지만) ... 중 하나를하시기 바랍니다 귀하의 제안

을 ... 작동하지 않습니다. 일단 옵션이 없으면 옵션을 사용합니다. 한 번만 (초기화) 호출 할 수 있으며 이후의 모든 호출은 무시됩니다.

두 번째를 제거하고 모든 옵션을 첫 번째 것에 넣기 만하면됩니다. name="email"와 input 아직 존재하지 않는 경우

$(document).ready(function(){ 
     var wrapper = $("#wrapper"); 
     var addForm = $("#add-form"); 
     var index = 0; 

     $("#myForm").validate({ 
      errorPlacement: function(error, element) { 
       error.insertAfter(element); 
      }, 
      rules: { 
       email: { // <-- does this input exist on DOM ready? 
        required: true 
       } 
      } //rules 
     }); //validate() 

     ....

그러나, rules 선언은 유효 할 것이다. 제로 input 요소를 함께 시작하여 form 것 같아 때문에, 당신은

$("#myForm").validate({ 
    errorPlacement: function(error, element) { 
     error.insertAfter(element); 
    } 
}); //validate()

출처

2013-08-30 14:41:31 Sparky

thnx (!)가 작동합니다. (비록 내가 아직도 언급 된 예제 http://www.coldfusionjedi.com/demos/jqueryvalidation/testadd.cfm이 규칙을 추가 한 후에 그 코드가 validate()를 호출하는 이유를 이해하지 못한다.) – Joppo

@ user2543182, 링크 된 예제에서'.validate()'는'click' 핸들러 함수 다음에 ** ** 룰을 추가 한 후에 ** 호출됩니다. 이 규칙은 버튼을 클릭 할 때만 추가된다는 것을 기억하십시오. DOM에 준비된 상태에서'.validate()'가 실행 된 지 오래됩니다. 동일한 작업을 수행 할 수 있어야하지만 다른 문제도 동시에 처리했을 수 있습니다. – Sparky

@user2543182, 페이지가로드 될 때 ('.validate()'가 초기화 일 때) 호출되는 것을 곧바로 유지하는 것이 중요합니다. '.validate()'메소드는 페이지가로드 된 후에 절대로 다시 호출되지 않는다. – Sparky

동적으로 추가 된 요소에 유효성 검사 규칙 추가

답변

관련 문제