javascript - Using parsley on a wizard form (3 steps)

Question

I'm working on a form based on a Twitter Bootstrap tab.

I use Parsley for validation form.

I would like to validate only the fields on my first tab (step 1) before clicking on the next button that go to step 2.

Is there a way to do that? Cheers.

Answer 1

您还可以向 parsley 添加一个事件侦听器，以检查元素是否可见。如果不可见，则不会应用验证。这样，您在不可见选项卡上的控件就不会被验证。

$( '#form' ).parsley( 'addListener', {
    onFieldValidate: function ( elem ) {

        // if field is not visible, do not apply Parsley validation!
        if ( !$( elem ).is( ':visible' ) ) {
            return true;
        }

        return false;
    }
} );

更新： 您可以使用您可能需要的任何条件，而不是检查元素的可见性。例如检查元素是否具有特定的类。

davidtheclark 建议的示例：

$( elem ).closest('.form-page').hasClass('is-hidden')

Answer 2

如果您在第二个选项卡上的字段被隐藏，您只需将 ':hidden' 属性添加到 'excludedFields' 选项。这样，每个 $(yourform).parsley('validate') 只会验证可见字段（即 step1 然后 step2）

如果这样做，请记住，您必须手动将 parsley 绑定到您的表单，而不是使用 data-validate="parsley"

Answer 3

如果您的整个表单已加载到 DOM 中，并且您能够使用 parsely API，您可以运行多个验证，一个用于向导的每个步骤。为此，您必须使用 parsley-bind 属性。就像是：

<form action="#">

    <!-- wizard step 1 --> 
    <div class='step1' parsley-validate parsley-bind>
       <input type="text" ..... />
       <input type="text" ..... />
    </div>

    <!-- wizard step 2 --> 
    <div class='step2' parsley-validate parsley-bind>
       <input type="text" ..... />
       <input type="text" ..... />
    </div>

    <!-- wizard step 3 --> 
    <div class='step1' parsley-validate parsley-bind>
       <input type="text" ..... />
       <input type="text" ..... />
    </div>

</form>

Answer 4

<script>
function onValidate(){

    if(!$('##formID').parsley( 'isValid' )){

        $('.parsley-error').closest('.tab-pane').show();
        return false;

    }

    return true;

 }
</script>    
<form data-validate="parsley" onSubmit="return onValidate()">

Answer 5

API 在 Parsley 2.0 中发生了很大变化。

有一个关于实现这一目标的好方法的官方示例。

Answer 6

这是@nmoliveira 为 Parsley 2.1+ 更新的代码：

$('form').parsley().on('field:validate', function() {
    var elem = this.$element;

    // If the field is not visible, do not apply Parsley validation!
    if ( !$( elem ).is( ':visible' ) ) {
        this.constraints = [];
    }
});