How to add css to form elements if attribute class is already being used in Jquery

Question

Hey guys

This is probably a dumb question - I'm using Jquery to validate the form. So the form elements have the class="required" attribute.

input type="text" name="last_name" class="required"/>

Now if i want to apply some css properties to the input fields of this form - how do I do that.

• I do not want to declare a general css for all input elements - I have declared the css as follows:

input.form
{
    color: #000;
    background: #fff;
    border: 2px solid #E1E1E1;
    font-size: 16pt;    
    width:150px;
}

And I want to use it this way

input class="form" type="text" name="last_name" class="required"/>

But this wont work as there are two class attributes here. So how do I handle this. Thanks

Answer 1

You can add as many classes for each element as you like. In your code you would declare this like:

<input class="form required" type="text" name="last_name" />

Any to apply special CSS rules to input elements only containing the "required" class, just add the following:

input.required
{
    color:#f00;
}

Answer 2

You can only have one of each attribute in an html element (I believe that the last one will overwrite previous ones). For multiple classes, you put them all in one attribute separated by spaces:

<input type="text" class="form required invalid" name="element" id="element" />

To check if something has a class:

$('#element').hasClass('required');

To remove a class:

$('#element').removeClass('invalid');

To add a class:

$('#element').addClass('valid');