javascript - ウィザード フォームでパセリを使用する (3 ステップ)

Question

Twitter Bootstrap タブに基づくフォームを作成しています。

検証フォームにはパセリを使用します。

ステップ 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

2 番目のタブのフィールドが非表示の場合は、「:hidden」プロパティを「excludedFields」オプションに追加するだけです。そうすれば、各 $(yourform).parsley('validate') は可視フィールドのみを検証します (つまり、ステップ 1 の次にステップ 2)。

その場合、 data-validate="parsley" ではなく、手動でパセリをフォームにバインドする必要があることに注意してください。

Answer 3

フォーム全体が DOM にロードされていて、parsely API を使用できる場合は、ウィザードのステップごとに 1 つずつ、複数の検証を実行できます。これを行うには、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 = [];
    }
});