Как добавить CSS для элементов формы, если класс атрибута уже используется в Jquery

Question

Это, вероятно, глупый вопрос - я использую Jquery для проверки формы. Таким образом, элементы формы имеют атрибут class = "required".

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

Теперь, если я хочу применить некоторые свойства CSS к полям ввода этой формы - как мне это сделать.

• Я не хочу объявлять общий CSS для всех элементов ввода - я объявил CSS следующим образом:

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

И я хочу использовать это так

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

Но это не сработает, поскольку здесь есть два атрибута класса. Так как мне справиться с этим. Спасибо

Answer 1

Вы можете добавить столько классов для каждого элемента, сколько захотите. В вашем коде вы бы объявили это как:

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

Любой, чтобы применить специальные правила CSS к элементам ввода, содержащим только «требуемый» класс, просто добавьте следующее:

input.required
{
    color:#f00;
}

Answer 2

Вы можете иметь только один из каждого атрибута в элементе html (я полагаю, что последний перезапишет предыдущие). Для нескольких классов вы помещаете их все в один атрибут, разделенный пробелами:

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

Чтобы проверить, имеет ли что-то класс:

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

Чтобы удалить класс:

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

Чтобы добавить класс:

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