Sprawdzanie poprawności dynamicznie dodawanych pól wejściowych

Question

Użyłem wtyczki sprawdzania jQuery this dla następującego formularza.

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script> 

<script> 
    $(document).ready(function(){ 
     $("#commentForm").validate(); 
    }); 

    function addInput() { 
     var obj = document.getElementById("list").cloneNode(true); 
     document.getElementById('parent').appendChild(obj); 
    } 
</script> 

<form id="commentForm" method="get" action=""> 
    <p id="parent"> 
     <input id="list" class="required" /> 
    </p> 

    <input class="submit" type="submit" value="Submit"/> 
    <input type="button" value="add" onClick="addInput()" /> 
</form> 

Po kliknięciu przycisku Dodaj nowe wejście jest dodawane dynamicznie. Jednak po przesłaniu formularza zatwierdzane jest tylko pierwsze pole wejściowe. Jak mogę sprawdzić poprawność dodanych wejść? Dziękuję ...

Answer 1

Powinieneś mieć atrybut "nazwa" dla swoich danych wejściowych. Musisz dynamicznie dodawać reguły, jedną z opcji jest dodawanie ich po przesłaniu formularza.

I tu jest moje rozwiązanie, które Przetestowałem i działa:

<script type="text/javascript"> 
    $(document).ready(function() { 
     var numberIncr = 1; // used to increment the name for the inputs 

     function addInput() { 
      $('#inputs').append($('<input class="comment" name="name'+numberIncr+'" />')); 
      numberIncr++; 
     } 

     $('form.commentForm').on('submit', function(event) { 

      // adding rules for inputs with class 'comment' 
      $('input.comment').each(function() { 
       $(this).rules("add", 
        { 
         required: true 
        }) 
      });    

      // prevent default submit action   
      event.preventDefault(); 

      // test if form is valid 
      if($('form.commentForm').validate().form()) { 
       console.log("validates"); 
      } else { 
       console.log("does not validate"); 
      } 
     }) 

     // set handler for addInput button click 
     $("#addInput").on('click', addInput); 

     // initialize the validator 
     $('form.commentForm').validate(); 

    }); 


</script> 

oraz formularz html część:

<form class="commentForm" method="get" action=""> 
    <div> 

     <p id="inputs">  
      <input class="comment" name="name0" /> 
     </p> 

    <input class="submit" type="submit" value="Submit" /> 
    <input type="button" value="add" id="addInput" /> 

    </div> 
</form> 

Powodzenia! Proszę zatwierdzić odpowiedź, jeśli ci odpowiada!

Answer 2

Spróbuj użyć tablic wejściowych:

<form action="try.php" method="post"> 
    <div id="events_wrapper"> 
     <div id="sub_events"> 
      <input type="text" name="firstname[]" />          
     </div> 
    </div> 
    <input type="button" id="add_another_event" name="add_another_event" value="Add Another" /> 
    <input type="submit" name="submit" value="submit" /> 
</form> 

i dodać ten skrypt i jQuery, używając foreach(), aby pobrać dane są $ _POST'ed:

<script>                      
    $(document).ready(function(){ 
     $("#add_another_event").click(function(){ 
     var $address = $('#sub_events'); 
     var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original 
     var newNum = num + 1; 
     var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress'); 

     //set all div id's and the input id's 
     newElem.children('div').each (function (i) { 
      this.id = 'input' + (newNum*5 + i); 
     }); 

     newElem.find('input').each (function() { 
      this.id = this.id + newNum; 
      this.name = this.name + newNum; 
     }); 

     if (num > 0) { 
      $('.clonedAddress:last').after(newElem); 
     } else { 
      $address.after(newElem); 
     } 

     $('#btnDel').removeAttr('disabled'); 
     }); 

     $("#remove").click(function(){ 

     }); 

    }); 
</script> 

Answer 3

Ten Mahesh pisał nie jest działa, ponieważ brakuje nazwy atrybutu:

Więc zamiast

<input id="list" class="required" /> 

Można użyć:

<input id="list" name="list" class="required" /> 

Modified version

Answer 4

resetowania walidacji formularza po dodaniu nowych pól.

function resetFormValidator(formId) { 
    $(formId).removeData('validator'); 
    $(formId).removeData('unobtrusiveValidation'); 
    $.validator.unobtrusive.parse(formId); 
} 

Answer 5

trzeba ponownie przeanalizować formę po dodaniu dynamicznej zawartości w celu sprawdzenia zawartości

$('form').data('validator', null); 
$.validator.unobtrusive.parse($('form')); 

Answer 6

w odniesieniu do @RitchieD odpowiedzi, tutaj jest wersja wtyczki jQuery, aby ułatwić jeśli używasz jQuery.

(function ($) { 

    $.fn.initValidation = function() { 

     $(this).removeData("validator"); 
     $(this).removeData("unobtrusiveValidation"); 
     $.validator.unobtrusive.parse(this); 

     return this; 
    }; 

}(jQuery)); 

ten może być stosowany tak:.

$("#SomeForm").initValidation();