1

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

2
  • You question leads to to believe you are doing something strange in jquery. You should post your jquery code sample. Apr 22, 2010 at 4:30
  • hey jarrett - I am not doing anything new - just using this example of Jquery to validate the form - look at the view source of the first example - docs.jquery.com/Plugins/Validation - all input fields have class=required
    – Gublooo
    Apr 22, 2010 at 5:08

2 Answers 2

3

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;
}
1
  • How did I forget that :) - Thanks so much
    – Gublooo
    Apr 22, 2010 at 5:26
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.