0

I am using addClass to validate my form. This is my javascript:-

if (name.val()=='') {
    name.addClass('highlight');
    return false;
} else name.removeClass('highlight');

and the css with the class I am adding is this :-

#coverup .highlight {
    border: 1px solid #a94442;
}

And this script above both works and is okay, however I want to add a glyphicon to the textfield as well as change the border colour, so that the error becomes more prominent to the user.

I then decided to simply change the code by doing another addClass method as shown below:-

if (name.val()=='') {
    name.addClass('highlight');
    name.addClass('highlight:after');
    return false;
} else name.removeClass('highlight'); name.removeClass('highlight:after');

and Then changed my CSS to this :-

#coverup .highlight {
    border: 1px solid #a94442;
}
#coverup .highlight:after {
    content:"\2715";
    color: red;
}

However doing this hasn't solved my issue, can anybody give me some options or guidance as to how I can simply add a glyphicon to the end of my text field if it isn't filled in as well as making the border change colour too.

Thanks!

Skwal
  • 2,160
  • 2
  • 20
  • 30
Sam Joy
  • 116
  • 6
  • 1
    when you use `:after`, css thinks it's a [pseudo class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) ... just use `.highlight_after` or `.highlightAfter`instead ... – rafaelcastrocouto Apr 03 '14 at 14:01
  • `hightlight` is a typo. – Niet the Dark Absol Apr 03 '14 at 14:03
  • @rafaelcastrocouto neither worked, thank you though any other help?? – Sam Joy Apr 03 '14 at 14:04
  • Why don't you use "append" to add an span with the glyphicon? Then, on every form submit event you remove all of them and check those fields again? – Igor Escobar Apr 03 '14 at 14:04
  • Update ( once you add highlight class, :after will be applied automatically ) - You cannot. Look http://stackoverflow.com/questions/12740967/how-do-you-add-pseudo-classes-to-elements-using-jquery ALSO you have more than 1 statesment after `else` selection so enclosed them in brakets. Also look at the first answer http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript for the solution. – Aamir Afridi Apr 03 '14 at 14:06
  • 2
    Plus, you don't have to `addClass('hightlight:after')` .. You just have add the style rule for it in the css – Karim AG Apr 03 '14 at 14:08
  • typo sorted and made necessary changes, thanks guys – Sam Joy Apr 03 '14 at 14:14

1 Answers1

0
  • <input /> elements cannot have child nodes.
  • ::before and ::after psuedo-elements are treated as a child inserted before the first, and after the last "real" child respectively.

The above two facts considered, you cannot apply ::before or ::after to <input /> elements.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592