3

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.

4

6 回答 6

9

您还可以向 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')
于 2013-08-14T14:44:30.657 回答
3

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

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

于 2013-06-19T18:23:34.657 回答
2

如果您的整个表单已加载到 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>
于 2013-12-16T22:58:01.817 回答
1 
<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()">
于 2013-08-01T21:20:23.090 回答
0

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

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

于 2017-09-05T12:36:55.813 回答
0

这是@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 = [];
    }
});
于 2016-03-31T12:14:52.107 回答