Question

我有以下默认验证器选项设置，如果验证无效，我需要显示红色错误信息

但是以下内容似乎适用于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;
}

Answer 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")，您将获得屏幕中真实文字的范围。

jquery验证无法处理选择元素

1 个答案: