Question

我正在使用Nice select替换当前<select>下拉列表，其中<ul>列表可以使用CSS进行自定义。我尝试使用jQuery Validate插件，但我无法使用<ul>列表。如果我停用“Nice select plugin”并保持当前的<select>下拉列表，它会很好用。

具体来说，表单现在看起来像：

<form id="MyForm">
 <div class="nice-select">
   <ul class="list">
     <li class="option selected" data-value=""></li>
     <li class="option selected" data-value="51"></li>
     <li class="option selected" data-value="52"></li>
     <li class="option selected" data-value="53"></li>
   </ul>
 </div>
</form>

和jQuery

$('#MyForm').validate({ 
        rules: {
            list: {
                selectcheck: true
            }
        }
    });

    jQuery.validator.addMethod('selectcheck', function (value) {
        return (value != '');
    }, "field required");
});

FIDDLE

（如果删除调用nice的行选择到javascript textarea的底部，它将起作用）

如何通过精选select实现jQuery验证？

任何帮助将不胜感激

由于

Answer 1

问题是jquery选择的插件隐藏了select元素，并构建了自定义html来模仿它。

在那个jquery验证插件默认忽略隐藏元素并且不验证它们

初始化时可以为验证器设置ignore属性，并强制它忽略任何内容：

$('#contact-form').validate({
    ignore: [],
    //your other validation settings
});

您的工作代码：https://jsfiddle.net/ashishanexpert/xws6bbw8/9/

this issue的参考：

Answer 2

这是一个更优雅的解决方案

<style>
    select {
        display: block !important;
        margin: 0;
        border: 0;
        padding: 0;
        height: 1px;
        opacity: 0;
        position: relative;
        /* Top should be the same as the height of your */
        /* unfocused, nice select replacement element! */
        top: 30px;
    }
</style>
<select name="my-field" required tabindex="-1"></select>

来源https://github.com/hernansartorio/jquery-nice-select/issues/19#issuecomment-403909062

Jquery使用Nice Select插件验证

2 个答案: