Question

我想我有一个简单的问题。我的表单上有一组字段：

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

});

但它似乎无法奏效。

我应该删除原来的课吗？

由于

Answer 1

否，您不必删除原始类..特殊性是那里的问题，因此您需要一个更具体的选择器。

input[type="text"]覆盖.highlight

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

Demo

不知道具体是什么？ Learn Here ..

如果你想计算特异性here's一个方便的工具，如果你在那里喂选择器，input[type="text"]的分数将 11 而{{1}是 10

Answer 2

!important告诉浏览器覆盖任何影响该属性的CSS规则。

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

Demo

Answer 3

我建议你将变化的风格保留在两个不同的类别中，而不是像Alien先生所示的重写。

类似于.green和.red。

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

.red{
    border: 1px solid red;
}

这有助于您避免混淆。

Working Fiddle

简而言之，不要将更改styes 作为常用样式保留到所有元素。不是一个好的设计。

jQuery / CSS - 在验证时添加类

3 个答案: