jQuery Validate 和 Nice Select 是否一致？答案

【问题标题】：jQuery Validate & Nice Select consistent at all?jQuery Validate 和 Nice Select 是否一致？
【发布时间】：2016-05-31 15:41:13
【问题描述】：

Nice Select 是否与 jQuery validate 一起使用？因为我遇到了一个奇怪的错误，我会尽力解释它

在尚未提交表单的情况下，我可以从 nice select 插件中选择值，它会正确更新（默认选择下拉列表）值，我可以毫无问题地提交表单
现在如果我刷新页面然后我提交表单，jQuery 错误验证会按预期追加，因为我没有选择一些值，所以我从 (nice select value) 中选择了一些值，现在它不更新 (默认选择）值，所以我无法提交表单

我认为当 validate 插件被调用时，nice select 不是动态更新的，或者我错过了一些东西

FIDDLE

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

任何帮助将不胜感激

提前致谢

【问题讨论】：

标签： jquery drop-down-menu jquery-validate

【解决方案1】：

jQuery Validate 插件会自动在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 Validate 插件通常会根据用户与select 元素的交互来触发验证。由于您的 select 元素是隐藏的并且用户没有直接与其交互，因此无论何时更改 Nice Select 元素都不会触发验证。

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

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

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

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

rules: {
    select: {
        required: true
    }
}

【讨论】：

【解决方案2】：

这是因为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

【讨论】：