jQuery/CSS - Добавить класс по проверке

Я думаю, что у меня простая проблема. У меня есть набор полей на моей форме:jQuery/CSS - Добавить класс по проверке

<input class="one-third" id="Firstname" type="text"/>

Когда один из этих полей пустым, моя проверка должна выделить поле (красный пограничное).

Я попытался скрипку - http://jsfiddle.net/oampz/Ybxk2/1/

$(".submitForm").click(function() { 

    if($("#Firstname").val() == ''){ 
     alert('Input can not be left blank'); 

     $("#Firstname").addClass("highlight"); 
    } 

    //document.forms[0].submit(); 

});

Но оно не похоже на работу.

Должен ли я удалить свой первоначальный класс?

Благодаря

источник

2014-01-29 Oam Psy

Я не знаю, почему этот вопрос был ниспровергнут, он попытался, он поделился своим кодом, а также демо, он не знал о специфике, так или иначе, не был кандидатом на downvote .. –

NO, вы не должны удалить оригинальные классы .. Специфичность вопрос там, так что вам потребуется более конкретный селектор.

input[type="text"] Overrides .highlight

input[type=text].highlight { 
    font-size:150%; 
    color:red; 
    border: 1px solid red; 
}

Demo

Не знаю, что это специфика? Learn Here ..

Если вы хотите, чтобы вычислить специфичность, here's удобный инструмент, если вы кормите селекторов там, оценка для input[type="text"] будет а для .highlight является

источник

2014-01-29 13:30:53

Not уверен, почему именовался. Спасибо за ваш вклад. –

@OamPsy Не беспокойтесь, это абсолютно идеальный вопрос, и вы приветствуете :) –

@ user3004356 Вы не должны здесь отвечать, прокомментируйте свой вопрос, я предоставил вам ссылку, потому что у вас есть аналогичная проблема –

!important рассказывает браузер для перезаписывания любых правил CSS, которые влияют на свойство.

.highlight { 
    font-size:150%; 
    color:red!important; 
    border: 1px solid red!important; 
}

Demo

источник

2014-01-29 13:32:16 Dijon

Я предлагаю вам сохранить меняющиеся стили в двух различных классов, а не отвергая, как показано на Mr.Alien.

что-то вроде .green и .red.

.green{ 
    border: 1px solid #ababab; 
} 

.red{ 
    border: 1px solid red; 
}

Это поможет вам не путать.

Working Fiddle

Короче говоря, не держит поочередной замены Styes в едином стиле ко всем элементам. Не хороший дизайн.

источник

2014-01-29 13:39:44

jQuery/CSS - Добавить класс по проверке

ответ

Смежные вопросы