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 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>

Parsley JS多步表单验证

2 个答案: