Parsley JS多步表单验证

Question

这是我的CoffeeScript

  wizard = $('#registrationWizard').wizard()
  $form = $('.finalize-form')

  $form.parsley
    inputs: 'input, select'
    excluded: 'input[type="hidden"]'

  wizard.on 'change', (e, data) ->
    e.preventDefault()
    p = $form.parsley 'validate'

    if p
      $('#registrationWizard').wizard 'next'
  .on 'finished', (e) ->
    if $form.parsley 'isValid'
      $form.submit()

在向导上激发change事件时，parsley将尝试验证整个表单，而不仅仅是当前步骤中的可见输入

Answer 1

我相信他们有你在documentation中寻找的例子。首先，您需要设置一个侦听器，让它知道您只是在寻找可见的输入：

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

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

      return false;
   }
} );

然后，当您完成向导中的步骤时，您可以通过简单地触发来验证可见元素：

$( '#form' ).parsley( 'validate' )

(我为缺少coffeescript道歉)

Answer 2

如果整个表单都加载到DOM中，并且能够使用parsely，则可以运行多个验证，向导的每个步骤对应一个验证。为此，必须使用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>