動態添加輸入字段通過驗證並提交無法

Question

另一頁

我是初學者，在動態添加輸入字段Reference From: Validate Dynamically Added Input fields，當通過驗證並提交不能到另一個頁面

按照腳本示例。

<script src="js/jquery-3.1.1.min.js"></script> 
<script src="js/jquery.validate.js"></script> 
<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> 

當通過驗證點擊提交屁股不能行動= 「/ action_page_post.php」

和HTML代碼

<form class="commentForm" method="get" action="/action_page_post.ph"> 
    <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> 

Answer 1

變化我做

• 改變on('submit')到submitbutton.onclick
• 添加$('.commentForm').submit();如果驗證爲真

原因這執行，如果條件內：由於您使用event.preventDefault()，它會阻止形式的默認行爲，因此沒有去下一個頁面。所以，你必須提交表單使用$(form).submit();
手動下面的代碼將工作正常的頁面上，但不是在SO摘錄

$(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++; 
 
     } 
 

 
     $('input.submit').click(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"); 
 
       $('.commentForm').submit(); 
 
      } else { 
 
       console.log("does not validate"); 
 
      } 
 
     }) 
 

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

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

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<form class="commentForm" method="get" action="action_page_post.php"> 
 
    <div> 
 

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

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

 
    </div> 
 
</form>