Chosen.js并validationjquery

我正在使用validate.jquery.js：工作正常。 但是当我添加selected.js时，对选择下拉列表的validation不再有效。

这是JS我正在使用http://pastebin.com/S9AaxdEN

这是我的选择forms：

  VTT Autre type de vélo  

不知道为什么choose.js禁用validation，任何想法？

Answer 1

您可以通过添加“chzn-done”类来解决这个问题，该类不将属性“ignore”改为“validate.settings”：

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

例

HTML：

 
 
 
Login Form
 
 datos   uno dos  
 
 Phone  
 
 Email  
 
 
  
 
  

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

我只想添加一个错误放置，它会将元素附加到隐藏的旁边，因此您可能希望通过在validation函数上使用以下代码作为选项参数来更改放置

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

Answer 3

这不仅可以解决无法看到validation的问题，还可以将标准的“input-validation-error”类应用于selected.js样式的select。

有两种情况需要在提交表单和选择更改时应用它。 请参阅下面的代码的三个部分。

1. 第一个设置表单validation以validation隐藏元素。
2. 第二个检查提交时选择的validation。
3. 第三个检查选择的更改validation。

设置表单validation以显示隐藏：

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

检查表单提交：

 $('#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"); } }); }); 

检查选择的更改：

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

Answer 4

在提交表单后 ，还存在validation所选择的选择菜单的问题。 如果菜单上有validation错误，则将菜单更改为有效，validation错误不会消失。 表单仍然可以提交，但鉴于显示validation错误，这一点并不明显。

这是使用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(); } });