jQuery验证&；真的很好吗？

Nice Select是否使用jQuery验证？ 因为我有一个奇怪的错误，我会尝试解释它

• 在还没有提交表单的情况下，我可以从niceselect插件中选择值，它会正确更新（默认选择下拉列表）值，并且我可以毫无问题地提交表单

• 现在如果我刷新页面然后提交表单，jQuery错误validate会按预期追加，因为我没有选择一些值，所以我从（nice select value）中选择了一些值，现在它不会更新（default select）值，所以我无法提交表单

我认为当validate插件被称为nice时，select并没有动态更新，或者我错过了一些东西

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>

$(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验证插件会在

select

元素之后自动插入验证消息。但是，在您的情况下，当动态创建niceselect

div

时，

select

元素被隐藏；验证插件无法再查看或切换此

标签

用于将验证消息放在Nice Select

div

元素之后。我的自定义函数是通用函数，适用于表单中所有隐藏的

select

元素

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

然而，这个答案还不完整。jqueryvalidate插件通常根据与

select

元素交互的用户触发验证。由于

select

元素是隐藏的，并且用户没有直接与之交互，因此每当更改Nice select元素时都不会触发验证

使用自定义的

change

处理程序函数确保每当Nice Select元素发生更改时，验证消息都会更新

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

工作演示：

---

顺便说一句：您不需要编写自定义规则来确保

select

元素包含值。只需使用

required

规则即可

rules: {
    select: {
        required: true
    }
}

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

rules: {
    select: {
        required: true
    }
}