2
Vote

input[type="text"] overrides .input-validation-error

description

.input-validation-error isn't working when the class is added to the textbox as a result of validation failing. input[type="text"] appears to be the reason. Is this a legit issue or am I just using the stylesheet incorrectly? If it is a legit issue, is there a work around?

The following is the css I'm referring too:

input[type="text"]
{
width: 200px;
border: 1px solid #CCC;
}

.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}

And the HTML:




Additionally: I found some css at the following website that looks interesting but doesn't seem to work: http://demosthenes.info/blog/462/Goodbye-JQuery-Validation-HTML5-Form-Errors-With-CSS3

input[type=email]:valid { / appearance for valid entry / }

comments

Meadock wrote Nov 26, 2012 at 3:53 AM

The HTML: <input name="EmailAddress" class="input-validation-error" id="EmailAddressTextBox" type="text" data-val-required="The Email Address field is required." data-val-length-max="50" data-val-length="The field Email Address must be a string with a maximum length of 50." data-val-email="The Email Address field is not a valid e-mail address." data-val="true" value=""/>

Meadock wrote Dec 2, 2012 at 6:14 PM

I discovered the answer to this. I added the following CSS to the "My CSS" section of the style sheet:

input[class="input-validation-error"],input[class="input-validation-error watermark"]
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}

watermark is there because I'm using the jQuery.Watermark package and it needs to be done this way or the watermark styles will override input-validation-error styles (the red border will go away)

Meadock wrote Dec 2, 2012 at 6:19 PM

Scratch the whole bit about watermark. The following CSS takes care of that issue:

input[class~="input-validation-error"]
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}

The tilde is what does it...

wrote Feb 14, 2013 at 12:01 AM

wrote Oct 21, 2013 at 7:03 PM