Parsley.js - 所有形式的一个多步骤函数

Question

我试图设置使用Parsely.js验证插件的多步骤表单验证。

我跟随这里的文档：“http://parsleyjs.org/doc/examples/multisteps.html” - 但唯一的问题是我会有几个表单，将跨越整个网站多个​​步骤，并在一些页面将有不止一个。

提供仅支持每次一个形式的片断，我需要指定不同的形式的ID如下显示：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.next').on('click', function() { 
    var current = $(this).data('currentBlock'), 
     next = $(this).data('nextBlock'); 

    // only validate going forward. If current group is invalid, do not go further 
    // .parsley().validate() returns validation result AND show errors 
    if (next > current) 
     if (false === $('#demo-form').parsley().validate('block' + current)) 
     return; 

    // validation was ok. We can go on next step. 
    $('.block' + current) 
     .removeClass('show') 
     .addClass('hidden'); 

    $('.block' + next) 
     .removeClass('hidden') 
     .addClass('show'); 

    }); 
}); 
</script> 

是否有办法来调整段，这样它会自动如果表单检测有多个步骤并相应地应用适当的行为/设置？而不是必须一遍又一遍地为每个表单复制该片段。

下面是HTML会是什么样子：

<form id="demo-form" data-parsley-validate> 
    <div class="first block1 show"> 
    <label for="firstname">Firstname:</label> 
    <input type="text" name="firstname" data-parsley-group="block1" required/> 

    <label for="lastname">Lastname:</label> 
    <input type="text" name="lastname" data-parsley-group="block1" required /> 
    <span class="next btn btn-info pull-right" data-current-block="1" data-next-block="2">Next ></span> 
    </div> 

    <div class="second block2 hidden"> 
    <label for="fullname">Email:</label> 
    <input type="text" name="fullname" required data-parsley-type="email" data-parsley-group="block2" /> 
    <span class="next btn btn-info pull-left" data-current-block="2" data-next-block="1">< Previous</span> 
    <input type="submit" class="btn btn-default pull-right" /> 
    </div> 
</form> 

Answer 1

您需要更改代码来指定用户当前使用的形式。我已经改变了你使用的代码块，包括评论：

$(document).ready(function() { 
    $('.next').on('click', function() { 
    // Find the form whose button was just clicked 
    var currentForm = $(this).parents('form').first(); 

    var current = $(this).data('currentBlock'), 
    next = $(this).data('nextBlock'); 

    // only validate going forward. If current group is invalid, do not go further 
    // .parsley().validate() returns validation result AND show errors 
    if (next > current) 
     // Use currentForm found above here, rather than hard coded form id 
     if (false === currentForm.parsley().validate('block' + current)) 
     return; 

    // validation was ok. We can go on next step. 
    // Hide current block on current form 
    currentForm.find('.block' + current) 
     .removeClass('show') 
     .addClass('hidden'); 

    // Show next block on current form 
    currentForm.find('.block' + next) 
     .removeClass('hidden') 
     .addClass('show'); 
    }); 
});