Chosen.js和驗證jquery

Question

我正在使用validate.jquery.js：工作正常。 但是，當我添加chosen.js時，對選擇下拉列表的驗證不再有效。

這裏是我使用http://pastebin.com/S9AaxdEN

這是我的選擇形式JS：

<select name="category" id="category" placeholder="" class="{validate:{required:true}}"> 
<option value=""><?php echo lang('category_choice'); ?></option> 
<option value="vtt">VTT</option> 
<option value="autre">Autre type de v&eacute;lo</option> 
</select> 

不知道爲什麼chosen.js禁用驗證，任何想法？

Answer 1

您可以通過添加類解決這個問題 「chzn，做」 不走財產 「忽視」 到 「validate.settings」：

var settings = $.data($('#myform')[0], 'validator').settings; 
settings.ignore += ':not(.chzn-done)'; 

example

HTML：

<form method="post" id="form1" action=""> 
    <fieldset> 
     <legend>Login Form</legend> 
     <div> 
      <label>datos</label> 
      <select name="data-select" title="data-select is required" class="chzn-select {required:true}" style="width:150px;"> 
       <option></option> 
       <option value="1">uno</option> 
       <option value="2">dos</option> 
      </select> 
     </div> 
     <div> 
      <label for="phone">Phone</label> 
      <input id="phone" name="phone" class="some styles {required:true,number:true, rangelength:[2,8]}" /> 
     </div> 
     <div> 
      <label for="email">Email</label> 
      <input id="email" name="email" class="{required:true,email:true}"> 
     </div> 

     <div class="error"></div> 
     <div> 
      <input type="submit" value="enviar datos"/> 
     </div> 
    </fieldset> 
</form> 

JS：

$(function() { 

    var $form = $("#form1"); 

    $(".chzn-select").chosen({no_results_text: "No results matched"}); 
    $form.validate({ 
     errorLabelContainer: $("#form1 div.error"), 
     wrapper: 'div', 
    }); 

    var settings = $.data($form[0], 'validator').settings; 
    settings.ignore += ':not(.chzn-done)'; 

    $('form').each(function(i, el){ 

     var settings = $.data(this, 'validator').settings; 
     settings.ignore += ':not(.chzn-done)'; 

    }); 

}); 

Answer 2

我只想補充一點，對於錯誤的位置，它會追加旁邊隱藏的元素，因此，你可能想使用你的驗證功能，下面的代碼作爲一個選項參數

errorPlacement: function(error,element) { 
     if (element.is(":hidden")) { 
      //console.log(element.next().parent()); 
      element.next().parent().append(error); 
     } 
     else { 
      error.insertAfter(element); 
     } 

    } 

Answer 3

改變位置這不僅解決了無法看到驗證的問題，而且它還將標準「輸入驗證錯誤」類應用於chosen.js樣式選擇。

有兩種情況需要在提交表單和選擇更改時應用。請參閱以下代碼的三個部分。

1. 第一個設置表單驗證來驗證隱藏的元素。
2. 第二個檢查提交時選擇的驗證。
3. 第三個檢查所選擇的變更驗證。

設置表單驗證，以顯示隱藏：在形式

var validator = $("#FormID").data('validator'); 
validator.settings.ignore = ":hidden:not(select)"; 

檢查提交：

$(".chzn-select").chosen().change(function() { 
    var ID = $(this).attr("id"); 
    if (!$(this).valid()) { 
     $("#" + ID + "_chzn a").addClass("input-validation-error"); 
    } 
    else { 
     $("#" + ID + "_chzn a").removeClass("input-validation-error"); 
    } 
}); 

：在選擇更改

$('#FormID').on('submit', function() { 
    var ChosenDropDowns = $('.chzn-done'); 
    ChosenDropDowns.each(function (index) { 
     var ID = $(this).attr("id"); 
     if (!$(this).valid()) 
     { 
      $("#" + ID + "_chzn a").addClass("input-validation-error"); 
     } 
     else 
     { 
      $("#" + ID + "_chzn a").removeClass("input-validation-error"); 
     } 
    }); 
}); 

檢查

Answer 4

還有一個問題，在表單已被提交後驗證所選擇的菜單。如果菜單上有驗證錯誤，那麼將菜單更改爲有效，驗證錯誤不會消失。該表單仍然可以提交，但這並不明顯，因爲存在驗證錯誤。

下面是使用invalidHandler和valid()修復它的一個示例。

// We'll use this flag so we don't have to validate fields before 
// the form has been submitted. 
var validatingForm = false; 

// This line before validate() is called allows 
// chosen menus to be validated 
$.validator.setDefaults({ ignore: ":hidden:not(select)" }); 

$("#yourForm").validate({ 
    invalidHandler: function() { 
     // Now we can validate the fields onChange 
     validateForm = true; 
    }, 
     rules: { 
      // Probably your validation rules here 
     } 
    }); 

// Now set an onChange event for the chosen menu 
$("yourChosenMenu").change(function(){ 

    // Check that we've tried to submit the form 
    if(validateForm) { 
     // We tried to submit the form, re-validate on change 
     $("yourChosenMenu").valid(); 
    } 
});