Question

我有一个表单并使用了jquery validate插件。我同时使用了焦点和放大器用于触发错误的键盘功能。它工作正常所有输入，但不在选择框中工作。

当我们移动到没有填充的下一个字段时，它将显示警报。警报可见后，如果开始填充，则警报消息在满足要求时隐藏。

但它在selectbox中不起作用。只需打开选择框并关闭选择框而不选择任何选项。现在转到下一个字段或提交。它显示警报消息。这次选择任何选项。但即使我们选择了一个选项，警告信息仍会显示。

如何像输入一样进行选择框验证？

我的剧本

$(function(){
    $("form").validate({
        ignore: ":hidden",
        onclick: false,
        //onfocusout: false,
        onsubmit: true,
        onkeydown: false,
        inlineErrors: true,
        onfocusout: function (element) {
                    this.element(element);
                 },
        onkeyup: function(element) {
                $(element).valid()
            },        
        rules: {
            input: {
                required: true,
                minlength:5
            },
            select: {
                required: true
            },

        },
        messages: {
            input: "Required",
            select: "Required",
        },
    });
});

我的表格

<form>
<input type="text" name="input" required>
<select name="select" required>
<option value="">Please Select</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<input type="submit" value="Submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>

这里是我的小提琴https://jsfiddle.net/4nqpd3uv/

Answer 1

如何像输入一样进行选择框验证？

您已将onclick设置为false，但您可能没有意识到这一点，因为您还遇到以下问题：
绝对没有名为inlineErrors和onkeydown的选项。你不能只是编造单词或盲目猜测：Refer to the documentation for the only valid options，并删除这些行。
没有理由拥有ignore: ':hidden'，因为此值与默认值完全相同。删除此行。
您无法将onsubmit设置为true。这已经是默认行为，onsubmit选项的documentation specifically states that "true is not a valid value"。您只能将其设置为false以禁用，或者将其设置为超越默认值。将此选项设置为true时，将使用"true"覆盖基础默认函数，这可能会导致不可预测的行为。删除此行。
显然您需要“急切”验证，因此您已将自定义onfocusout和onkeyup功能设置为立即验证。问题是您在.valid()内使用onkeyup。您应该使用.element()，就像在onfocusout中一样。 .element()方法是从 .validate()内的执行此操作的更合适的方法。只使用.valid()之外的.validate() ，否则，您可能会在某些情况下将JavaScript放入循环中。

没有理由在HTML中嵌入required属性。您的required规则已在两个字段的rules对象中声明。它是多余的，因此您可以删除这些HTML5属性。

将onclick设置为false是您投诉的根本原因。当您从select元素中选择一个选项时，这将删除验证触发器。您不能将其设置为true，因此请删除此行。（ onclick的官方文档缺少有关select元素的信息，因此我提交了修改此内容的修改。）

工作代码：

$("form").validate({ // REMOVE THESE COMMENTED LINES // ignore: ":hidden", // <- exactly the same as DEFAULT // onclick: false, // <- disables select validation - ROOT PROBLEM! // onfocusout: false, // <- duplicate, see below // onsubmit: true, // <- must NOT set to true! // onkeydown: false, // <- NO SUCH OPTION! // inlineErrors: true, // <- NO SUCH OPTION! onfocusout: function(element) { this.element(element); // <- eager validation }, onkeyup: function(element) { this.element(element); // <- eager validation }, rules: { input: { required: true, // remove inline HTML5 'required' attribute minlength: 5 }, select: { required: true // remove inline HTML5 'required' attribute } }, messages: { input: "Required", select: "Required", }, });

DEMO：jsfiddle.net/qu2jgj22/

OnKeyup jquery验证方法不工作selectbox

1 个答案: