Петрушка 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, и вы можете использовать петрушка 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>