Question

我正在处理基于Twitter Bootstrap标签的表单。

我使用Parsley作为验证表。

我想在点击转到第2步的下一个按钮之前，只验证第一个标签上的字段（第1步）。

有办法吗？欢呼声。

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）

如果您这样做，请记住您必须手动将欧芹绑定到表单而不是使用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

以下是@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 = [];
    }
});

Answer 6

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

有一个official example就可以实现这一目标。

在向导表单上使用欧芹（3个步骤）

6 个答案: