jQuery Validate & Nice Select 完全一致？

Question

Nice Select 正在使用 jQuery 验证吗？因为我得到一个奇怪的错误，我会尽力解释它

在尚未提交表单的情况下，我能够 select 来自 nice select 插件的值并正确更新（默认 select下拉）值，我可以毫无问题地提交表单
现在，如果我刷新页面然后提交表单，jQuery 错误验证会按预期附加，因为我没有 selected 一些值，所以我 select 来自（不错的 select 值）的一些值，现在它不会更新（默认值 select）值，所以我无法提交表单

我觉得validate插件调用的时候niceselect不是动态更新的，或者漏掉了什么

html :

<form id="MyForm">
   <select id="MySelect" name="select">
     <option value="">Select a value</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
   </select>
   <button id="MyButton" type="submit">Submit</button>
</form>

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

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

的更改

// .prev() in this case is the <label class="error">, 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 <select>:
      error.insertAfter(".nice-select");
    } else {
      error.insertAfter(element);
    }
  }
});

JSFiddle demo

Answer 2

jQuery 验证插件自动在 select 元素后插入验证消息。但是，在您的情况下，动态创建 Nice Select div 时隐藏 select 元素；验证插件无法再看到或切换此 label.

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

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

但是，这个答案还没有完成。 jQuery 验证插件通常会根据用户与 select 元素的交互来触发验证。由于您的 select 元素是隐藏的并且用户没有直接与其交互，因此无论何时更改 Nice Select 元素都不会触发验证。

使用自定义 change 处理程序函数来确保每当 Nice Select 元素更改时更新验证消息...

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

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

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

rules: {
    select: {
        required: true
    }
}

jQuery Validate & Nice Select 完全一致？

jQuery Validate & Nice Select consistent at all?

jquery

jquery-validate

drop-down-menu