jQuery 验证不适用于选择元素答案

【问题标题】：jquery validate not working on select elementsjQuery 验证不适用于选择元素
【发布时间】：2016-01-22 15:57:35
【问题描述】：

我设置了以下默认验证器选项，如果验证不起作用，我需要在其中显示红色错误消息

但以下似乎适用于Input 和textareas，但不适用于select

$.validator.setDefaults({
        ignore: "",
        errorPlacement: function(error, element) {
        element.attr('title', error.addClass('error').text());
        element.attr('placeholder', error.addClass('error').text());
        element.attr('title', error.text());
       },
       highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).addClass('error').removeClass(validClass).removeClass('valid');
        $(element.form).find("input[id=" + element.id + "]").addClass(errorClass).addClass('error');
        $(element.form).find("select[id=" + element.id + "]").addClass(errorClass).addClass('error');
        },
        unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).removeClass('error').addClass(validClass).addClass('valid');
        $(element.form).find("input[id=" + element.id + "]").removeClass(errorClass).addClass(validClass).addClass('valid');
        $(element.form).find("select[id=" + element.id + "]").removeClass(errorClass).addClass(validClass).addClass('valid');
        }
    });

CSS

.error {
    color:#F00 !important;border:1px solid red !important;
}
.valid {
    color:#060 !important;
}

【问题讨论】：

嘿，你认为你可以尝试发布一个工作示例（使用相关的 html）吗？ :)
如果他不发布 html，你怎么知道他有相同 ID 的元素？
是的，我看到了，但这并不意味着他有两个具有相同 id 的元素，这只是一种更改具有此 id 的元素的方法，无论是输入还是选择，它不是最好的方法，但这不是你的想法
@kpucha 好的，感谢您澄清这一点。我将删除我的 cmets
你好，这里是网站的链接，点击提交按钮，你会看到，选择不验证http://tinyurl.com/zl5l34d

标签： javascript jquery html css validation

【解决方案1】：

您正在使用一个使用跨度显示文本的组件，因此您没有显示选择，您正在显示一个跨度（用 firebug 看），您需要更改跨度颜色。

这是您生成的 HTML：

<div class="selector" id="uniform-vehicleID" style="width: 348px;">
    <span style="width: 331px; -moz-user-select: none;">Select One...</span>
    <select data-msg-required="Choose Vehicle" data-rule-required="true" class="form-control error" id="vehicleID" name="vehicleID" aria-required="true" title="Choose Vehicle" placeholder="Choose Vehicle" aria-invalid="true"> 
        <option disabled="disabled" selected="" value="" style="color: red ! important;">Select One...</option> 
        <option value="1">Luxury Sedan or Towncar</option> <option value="2">Stretch Limousine</option> 
        <option value="3">SUV Limousine</option> <option value="4">Business Class Van</option> 
    </select>
</div>

如您所见，您的选择有 error 类，但有一个跨度，用户看到的是该跨度。

如果您的所有选择都使用相同的组件，您可以更改跨度：

$(element.form).find("select[id=" + element.id + "]").removeClass(errorClass).addClass(validClass).addClass('valid');

有了这个：

$(element.form).find("select[id=" + element.id + "]").parent().find("span").removeClass(errorClass).addClass(validClass).addClass('valid');

使用.parent，您将提升<div class="selector"...，使用.find("span")，您将获得屏幕中真实文本的跨度。

【讨论】：