Parsley.js根據選定的單選按鈕驗證表單的各個部分

Question

通過此提琴可能最容易解釋： http : //jsfiddle.net/shanomurphy/dL688o9j/

我想根據選擇的單選按鈕顯示/隱藏表單的各個部分。 選中單選按鈕后，我會顯示一些額外的表單字段並隱藏其他字段。 我只希望Parsley.js驗證顯示的字段。

更改選定的單選按鈕並且已經運行香菜驗證時，我遇到了問題。

 // Vars var drinks_fields = $('#drinks'); var food_fields = $('#food'); // Hide fields until needed drinks_fields.hide(); food_fields.hide(); $("input[name=choice]").on('click', function() { if ( $(this).val() == 'Drinks' ) { // Show drinks hide food drinks_fields.show(); food_fields.hide(); // Update required $("input[name=drinks]").prop('required',true); $("input[name=food]").prop('required',false); } else if ( $(this).val() == 'Food' ) { // Show food hide drinks food_fields.show(); drinks_fields.hide(); // Update required $("input[name=food]").prop('required',true); $("input[name=drinks]").prop('required',false); } }); 

 <form data-parsley-validate="true"> <fieldset> <legend>Choice</legend> <input type="radio" name="choice" value="Drinks" required data-parsley-error-message="Choose drinks or food"/>Drinks <input type="radio" name="choice" value="Food"/>Food </fieldset> <fieldset id="drinks"> <legend>Drinks</legend> <input type="checkbox" name="drinks" data-parsley-mincheck="2" data-parsley-trigger="change" data-parsley-error-message="Choose min 2 drinks"/>Water <input type="checkbox" name="drinks"/>Pepsi <input type="checkbox" name="drinks"/>Orange Juice </fieldset> <fieldset id="food"> <legend>Food</legend> <input type="checkbox" name="food" data-parsley-mincheck="2" data-parsley-trigger="change" data-parsley-error-message="Choose min 2 foods"/>Cake <input type="checkbox" name="food"/>Hotdog <input type="checkbox" name="food"/>Pizza </fieldset> <button type="submit">submit</button> </form> 

Answer 1

顯示/隱藏字段后，您需要重新綁定Parlsey。

像這樣：

$("input[name=choice]").on('click', function() {
    if ( $(this).val() == 'Drinks' ) {
        // your code
    } else if ( $(this).val() == 'Food' ) {
        // your code
    }

    $("form").parsley().destroy();

    $("form").parsley();
});

另外，您可以銷毀隱藏字段的ParsleyField對象，並為顯示的字段創建ParsleyField對象，如下所示：

$("input[name=choice]").on('click', function() {
    if ( $(this).val() == 'Drinks' ) {
        // Show drinks hide food
        drinks_fields.show();
        drinks_fields.parsley();
        food_fields.hide();
        food_fields.parsley().destroy();
        // Update required
        $("input[name=drinks]").prop('required',true);
        $("input[name=food]").prop('required',false);
    } else if ( $(this).val() == 'Food' ) {
        // Show food hide drinks
        food_fields.show();
        food_fields.parsley();
        drinks_fields.hide();
        drinks_fields.parsley().destroy();
        // Update required
        $("input[name=food]").prop('required',true);
        $("input[name=drinks]").prop('required',false);
    }  
});

Answer 2

有趣的例子和偉大的小提琴。

現在2.0.6已發布，如果您還相應地更改了data-parsley-mincheck屬性，您的提琴將起作用。 這是一個示例錯誤顯示雖然不能正常工作，但不知道為什么。

您的問題說明了刪除必填字段的錯誤 。 它還說明了刪除所有約束的另一個錯誤 （也帶來了一些有缺陷的 測試 ）。

這些錯誤已在2.0.6中修復。

不過，還有另一種方法可以解決這個問題。 無需更改字段的required屬性，您可以簡單地排除隱藏的輸入：

jQuery("form").parsley({ excluded: ":hidden" });

在這里完成小提琴 。 在此示例中，錯誤消息不會顯示，但我不確定為什么（昨天我才開始認真看parlsey ）。