jQuery Validate＆Nice选择一致吗？

是不是选择使用jQueryvalidation？ 因为我得到一个奇怪的错误，我会尝试解释它

• 如果还没有提交表单，我可以从nice select插件中选择值并正确更新（默认选择下拉列表）值，我可以提交表单而不会出现问题

• 现在，如果我刷新页面然后我提交表单，jQuery错误validation按预期附加，因为我没有选择一些值，所以我从（精选值）中选择一些值，现在它不更新（默认选择）因此我无法提交表格

我认为当调用validate插件时，select不会动态更新，或者我可能会遗漏一些东西

小提琴

HTML ：

  Select a value 1 2 3 4  Submit  

jQuery ：

 $(document).ready(function() { // Form Validate $('#MyForm').validate({ ignore: [], rules: { select: { selectcheck: true } } }); jQuery.validator.addMethod('selectcheck', function (value) { return (value != ''); }, "Value required"); // Activate NiceSelect $('#MySelect').niceSelect(); }); 

任何帮助，将不胜感激

提前致谢

Answer 1

jQuery Validate插件会自动在select元素后面插入validation消息。 但是在您的情况下，当动态创建Nice Select div时，将隐藏select元素; validation插件无法再查看或切换此label 。

使用errorPlacement函数将validation消息放在Nice Select div元素之后。 我的自定义函数是通用的，适用于表单中所有隐藏的select元素。

 errorPlacement: function(error, element) { if (element.is('select:hidden')) { error.insertAfter(element.next('.nice-select')); } else { error.insertAfter(element); } } 

但是，这个答案还没有完成。 jQuery Validate插件通常根据用户与select元素交互来触发validation。 由于您的select元素是隐藏的，并且用户没有直接与它进行交互，因此每当更改Nice Select元素时都不会触发validation。

使用自定义change处理程序函数可确保在更改Nice Select元素时更新validation消息…

 $('#MySelect').on('change', function() { $(this).valid(); }); 

工作演示： https ： //jsfiddle.net/9yvz4ztv/

---

顺便说一句：您不需要编写自定义规则来确保select元素包含值。 只需使用required规则即可。

 rules: { select: { required: true } } 

Answer 2

这是因为error标签放置。
标签直接放在元素之后，但插件使用此代码触发更改：

 // .prev() in this case is the , not "select" ... n.prev("select").val(s.data("value")).trigger("change") 

---

您可以使用errorPlacement选项更改标签的位置：

 $('#MyForm').validate({ ignore: [], rules: { select: { selectcheck: true } }, errorPlacement: function(error, element) { if (element.attr("name") == "select") { // place the label after the .nice-select DIV, not : error.insertAfter(".nice-select"); } else { error.insertAfter(element); } } }); 

JSFiddle演示