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(); 
    } 
});