ruby-on-rails-3.2 - 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

我相信他们有你在文档中寻找的东西作为例子。首先你需要设置一个监听器让它知道你只是在寻找可见的输入：

$( '#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' )

（我为缺少咖啡脚本道歉）

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>