JQuery Validator 样式神秘地被 CSS 样式表覆盖

Question

我一直在尝试让 Jquery Validator 插件在出现错误时以红色和红色边框显示错误消息，但由于某种原因，CSS 样式表导致了以下问题:

1. 覆盖红色文本和红色边框 errorclass 并使它们成为默认颜色。

2. 推送错误消息，在错误消息和文本字段之间留下一个丑陋的大空间。

3.在错误的文本字段上重新输入时，错误消息不会消失，并且该字段内的文本也会变为红色。

这是我的 fiddle :http://jsfiddle.net/5zyv0uLr/请用最简单的术语解释一下，我是 Jquery 的绝对初学者，本周才开始学习如何使用 JQuery 验证器。谢谢!

CSS:

.error-class{ border-color:2px solid red; color:red;} 

.valid-class{ border-color:2px solid grey; color:black;} 


.user_signup {display: block;}
.user_signup label {display: block; margin-bottom:5px; color:#666;}
.user_signup input[type="text"], .user_signup input[type="email"], .user_signup input[type="password"] {display: block; width:100%; padding:15px; border-radius:5px; border:1.2px solid #DDD; font-size:20px; color:#333; font-family:arial; margin-bottom:20px;    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; 
}}

.user_signup input[type="password"]:focus { 
    outline: none;
    border-color: #39F;
   }

.user_signup input[type="text"]:focus { 
    outline: none;
    border-color: #39F;
   }

.user_signup input[type="email"]:focus { 
    outline: none;
    border-color: #39F;
   }

.signupbtn { background: #F4F4F2; display:block; width:100%; padding:20px; margin:0px 0; font-size:20px; margin-top:15px; border-radius:5px; box-sizing: border-box;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; color:#FFF; text-align:center; text-decoration:none;background:blue; cursor:pointer; outline:none !important;
    -webkit-appearance:none; border:none;} 

/*.btn_red {background:orange; color: #FFF; }*/

.signupbtn:hover {background:blue; color:white;}



.btnwrapper2 {display:inline-block; width:100%; height:auto; position:relative; clear:both; margin-top:0px; margin-right:10px;
}


.signup-form {text-align:left; float:left; display:inline-block;  }

.signup-form  p {float:left; margin-bottom:15px; font-size:20px; clear:both;}

HTML:

<div class="user_signup" id="user_register1">           
    <form class="signup-form">

    <input class="fullname errorClass" type="text" name="fullname"  placeholder="First and Last Name" />

    <input class="email" type="email" name="email" placeholder="Email address"/>

<input class="pass" name="pass" type="password" placeholder="New password" />
            <div class="btnwrapper2">
            <input class="signupbtn" value="Sign up!" type="submit"/> 
          </div>
         </div>
        </form>
    </div>

Jquery

$(function() {



    $.validator.addMethod("lettersonly", function(value, element) { 
    return this.optional(element) || /^[a-z\s]*$/i.test(value);
}, "Please enter only letters"); 

    $.validator.addMethod('strongPassword', function(value, element) {
        return this.optional(element)
        || value.length >= 6
        && /\d/.test(value)
        && /[a-z]/i.test(value);
    }, 'Your password is too weak.')

    $(".signup-form").validate({
         errorClass: "error-class",
    validClass: "valid-class",
    rules: {            
             fullname: {
                required: true,
                lettersonly: true
            },

            email: {
                required: true,
                email: true
            },

            pass: {
                required: true,
                strongPassword:true
            }
},

messages: {

pass: {
                required: "Please type your new password."          
            },

            email: {
                required: "Please type your username or email.",
                minlength: "Username or email is too short."            
            }
}

}); 
});

Answer 1

为什么不显示边框？

您使用了错误的 CSS 操作。当您设置所有边框属性时，它应该只是 border，而不是 border-color:

.error-class{ border: 2px solid red; color: red; } 

为什么颜色不是红色？

此样式规则正在覆盖该值:

.user_signup label {display: block; margin-bottom:5px; color:#666;}

因为它更多 specific ，它会覆盖 .error-class 的不太具体的规则。您可以使用 !important 修复它:

.error-class{ border: 2px solid red; color: red !important; } 

大量使用 !important 通常不是一个好主意，因此您可以使选择器更具体:

.user_signup label.error-class{ border: 2px solid red; color: red !important; } 

如何调试 CSS？

如果您只是阅读代码，要找出 CSS 规则不适用的原因几乎是不可能的。相反，请使用浏览器中的开发人员工具(按 F12)。这是我在 Firefox 中获得的有关您在单击时尝试设置样式的标签元素的信息:

我可以看到 color 的红色值被划掉并且没有被使用，我可以看到使用的是什么值。通过取消选中该复选框，我可以看到如果我删除该规则会发生什么。这使得发现问题变得更加容易。