使用 jquery 动态检查公式

Question

我想检查我用 jquery 创建的输入字段。如果有人按下按钮“einen Schritt hinzufügen”，jquery 将创建到 div all_steps，这个结构：

<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>

现在我想检查在按下“erstellen”按钮后使用 jquery 创建的所有字段。如何参考动态创建的输入字段来检查它们？

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