用jQuery檢查動態公式

Question

我想檢查我用jquery創建的輸入字段。如果按鈕 「einen Schritthinzufügen」 的jquery有人按將創建成格all_steps，這structur：

<div class="step"> 
 
    <div class="header_step">Schritt '+ (x + 1) +' des Tutorial\'s</div> 
 
    <div class="body_step"> 
 
    <a class="create_tutorial_a">Titel des Schrittes</a> 
 
    <input name="input_title_name'+x+'" class="create_tutorial_input" /> 
 
    <br> 
 
    <a class="create_tutorial_a">Bild</a><input type="file" /> 
 
    <br><br> 
 
    <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a> 
 
    <br> 
 
    <textarea class="create_tutorial_textarea" name="input_description_name'+x+'"> 
 
    </textarea> 
 
    </div> 
 
</div>

這裏是我的jQuery代碼：

$(document).ready(function() { 
 
    var max_fields  = 10; //maximum input boxes allowed 
 
    var wrapper   = $(".all_steps"); //Fields wrapper 
 
    var add_button  = $("#add_step"); //Add button ID 
 
    var remove_step  = $("#remove_step"); 
 
    
 
    var x = 0; //initlal text box count 
 
    $(add_button).click(function(){ //on add input button click 
 
     if(x < max_fields){ //max input box allowed 
 
      $(wrapper).append('<div class="step"><div class="header_step">Schritt '+ (x + 1) +' des Tutorial\'s</div><div class="body_step"><a class="create_tutorial_a">Titel des Schrittes</a><input name="input_title_name'+x+'" class="create_tutorial_input" /><br><a class="create_tutorial_a">Bild</a><input type="file" /><br><br><a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a><br><textarea class="create_tutorial_textarea" name="input_description_name'+x+'"></textarea></div>'); 
 
      x++; //text box increment 
 
     } 
 
    }); 
 
    
 
    $(remove_step).click(function(){ //user click on remove text 
 
     $('.all_steps .step:last').remove(); 
 
     x--; 
 
    }); 
 
    
 
    $(submit).click(function(){ 
 
     
 
    }); 
 
});

這裏是我的html代碼：

<section> 
 
    <article> 
 
     <div class="step"> 
 
      <div class="header_step">Erstelle dein eigenes Tutorial</div> 
 
      <div class="body_step">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> 
 
     </div> 
 
     <form method="post" action="index.php?content=create_tutorial"> 
 
     <div class="step"> 
 
      <div class="header_step">Allgemeines zum Tutorial</div> 
 
      <div class="body_step"> 
 
       <a class="create_tutorial_a">Titel des Tutorial's</a><input class="create_tutorial_input"/> 
 
       <br> 
 
       <a class="create_tutorial_a">Autor des Tutorial's</a><input class="create_tutorial_input"/> 
 
       <br><br> 
 
       <a class="create_tutorial_a_full_width">Beschreibung des Schrittes</a> 
 
       <br> 
 
       <textarea class="create_tutorial_textarea"></textarea> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="all_steps"> 
 
      
 
     </div> 
 
     
 
     <div class="step"> 
 
      <div class="body_step"> 
 
       <input class="create_button" type="button" id="submit" value="Erstellen"/> 
 
       <input type="button" class="create_button" id="add_step" value="Schritt hinzufügen"/> 
 
       <input type="button" class="create_button" id="remove_step" value="Schritt entfernen"/> 
 
      </div> 
 
     </div> 
 
     </form> 
 
     
 
    </article> 
 
    <div class="clearBoth"></div> 
 
</section>

現在我要檢查所有的領域，即是後使用jQuery創建「ERSTELLEN」按鈕被按下。我怎樣才能引用動態創建的輸入字段來檢查它們？

MyPage

Answer 1

你能採取的步驟內循環使用jQuery和你闖到大需要知道每一步的指標只是看看它是如何與代碼工作如下

$(submit).click(function(){ 

    /* looping steps */ 
    $('.all_steps .step').each(function(){ 
     var step = this; 
     /* Here select what inputs you need and do the checks */ 
     /* Example */ 
     console.log( $(step).find('.create_tutorial_input').val()); 
     console.log( $(step).find('.create_tutorial_textarea').val()); 

    }); 

}); 

工作拷貝https://jsfiddle.net/a0f69pu4/

Answer 2

你可以使用這樣的第三方jQuery插件http://formvalidation.io/也檢查Validate fields using JQuery validation without any submit?和https://formden.com/blog/validate-contact-form-jquery