在嚮導窗體上使用歐芹（3個步驟）

Question

我正在基於Twitter Bootstrap選項卡的窗體上工作。

我使用歐芹驗證表單。

我想點擊下一個按鈕轉到步驟2

有沒有辦法做到這一點之前驗證只是我的第一個選項卡（步驟1）中的字段？乾杯。

Answer 1

如果第二個選項卡上的字段已隱藏，則可以將'​​：hidden'屬性添加到'excludedFields'選項。這樣，每個$（yourform）.parsley（'validate'）只會驗證可見字段（即step1然後是step2）

如果你這樣做，記住你必須手動綁定parsley到你的表單而不是該數據驗證=「香菜」

Answer 2

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

還可以添加一個事件偵聽器到香菜來檢查，如果該元素是可見或不可見。 如果不可見，則不會應用驗證。通過這種方式，您不可見的標籤頁上的控件不會被驗證。

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

如果你的整個造型在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> 

Answer 5

這裏是@nmoliveira代碼，更新的香菜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 = []; 
    } 
}); 

Answer 6

API中的香菜2.0有了很大的變化。

有一個official example在一個很好的方式來實現這一點。