CODEWITHSUNDEEP
jquerycss
Gublooo
Gublooo

Reputation: 2618

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

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.

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

Upvotes: 1

Views: 3715

Answers (2)

SeanJA
SeanJA

Reputation: 10374

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');

Upvotes: 1

Sam Becker
Sam Becker

Reputation: 19646

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;
}

Upvotes: 3

Related Questions