为什么没有显示边框？

Question

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

1。覆盖红色文本和红色边框错误类，并将其设为默认颜色。

2。推送Errormessage，在errormessage和文本字段之间留下一个巨大的空间。

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

这里是我的小提琴：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 peropery。设置所有边框属性时，它应该是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的红色值被删除而未被使用，我可以看到使用了什么值。通过取消选中该复选框，我可以看到如果删除该规则会发生什么。它使得发现问题变得更加容易。

Answer 2

好的，在我原来的问题中，我的jsfiddle只针对文本周围的边框颜色而不是输入字段，但样式并没有显示出来。

.error-class {border-color：2px solid red;颜色：红色;}

.valid-class {border-color：2px solid grey;颜色：黑色;}

因此，为了确定正确的元素并使样式显示，我必须首先定位输入字段：

.user_signup input[type="text"].error-class,
.user_signup input[type="email"].error-class,
.user_signup input[type="password"].error-class {
    border: 2px solid red;
    color: red;
}

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

然后定位标签字段，将错误消息文本的颜色更改为红色，并使用margin-top向下移动文本。

.user_signup label.error-class {

    color:red; margin-top:-20px; 
}



.user_signup {
    display: block;
}


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

特别感谢Sparky，他帮助我找到答案。希望这可以帮助那些与我有同样问题的人：

http://jsfiddle.net/5zyv0uLr/5/

<强> 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>
        <br />
        <br />
</div>
</form>
</div>

<强> CSS：

.user_signup input[type="text"].error-class,
.user_signup input[type="email"].error-class,
.user_signup input[type="password"].error-class {
    border: 2px solid red;
    color: red;
}

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

.user_signup label.error-class {

    color:red; margin-top:-20px; 
}

.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;
}

<强> 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."
            }
        }
    });

});

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

2 个答案:

为什么没有显示边框？

为什么颜色不是红色？

如何调试CSS？