jquery验证css是否也影响了字段？

Question

如何避免jquery验证css到字段。我有一个下拉列表。如果验证失败。下拉文字颜色也变为红色。怎么避免呢？并在字段下显示验证错误消息。假设在旁边。

class
    .validationError {
        color: #ff0000;
    }


<select class="form-control validationError" data-val="true" data-val-required="The CommunicationLocation field is required." id="CommunicationLocation" name="CommunicationLocation" aria-required="true" aria-invalid="true">
 <option value="">Select</option>
 <option value="HOME">Personal</option>
 <option value="WORK">Work/University</option>
</select>
<label id="CommunicationLocation-error" class="validationError" for="CommunicationLocation">Required</label>

脚本

 $.validator.addMethod("selectNone",
        function (value, element) {
            alert(value);
            if (value == 'Select')
                return false;
            else
                return true;
    });
$("#frmEmail").validate({
    rules: {
        CommunicationLocation: {
            required: true
        }

    },
    messages: {
        CommunicationLocation: {
            required: "Required"
        }
    },
   errorClass:"validationError",

Answer 1

1. According to your HTML, the <label> element will be on the right side of the <select> element。我们看到的JavaScript或HTML中没有任何内容可以让它显示在下面。但是，如果您的父容器不够宽，那么此内容将自动换行到下一行。您需要检查DOM并修复相关父容器的宽度，以允许<select>和<label>并排显示。否则，您必须向我们显示导致此问题的实际代码。

2. 如果您不希望input元素使用与错误消息容器相同的CSS属性，那么您的CSS目标需要更具体。使用label.validationError仅定位包含错误消息的label。

   label.validationError {
       color: #ff0000;
   }
   

DEMO：http://jsfiddle.net/afeag0sy/