jquery validation css change effecting field too?

Question

How avoid jquery validation css to field too. I have a dropdown. If validation fails. dropdown text color also changing to red. How to avoid that? and also validation error message show under field. suppose to next to field.

enter image description here

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>

script

 $.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",

Change the CSS rule from .validationError to label.validationError — j08691
– j08691, Commented Mar 23, 2015 at 19:38

Sparky · Accepted Answer · 2015-03-23 22:43:38Z

2

According to your HTML, the <label> element will be on the right side of the <select> element. There is nothing in the JavaScript or HTML shown to us that would make it appear underneath. HOWEVER, if your parent container is not wide enough, then this content will automatically wrap to the next line. You'll need to inspect your DOM and fix the width of the relevant parent container to allow the <select> and <label> to appear side by side. Otherwise, you'll have to show us the actual code that causes this problem.
If you don't want the input element to use the same CSS properties as the error message container, then your CSS target needs to be more specific. Use label.validationError to target only the label containing the error message.
```
label.validationError {
    color: #ff0000;
}
```

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

edited Mar 23, 2015 at 22:43

answered Mar 23, 2015 at 22:34

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery validation css change effecting field too?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related