我一直试图让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."
}
}
});
});
答案 0 :(得分: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规则不坚持的原因几乎是不可能的。而是使用浏览器中的开发人员工具(按F12)。这是我在Firefox中获得的关于我点击它时要尝试设置的标签元素的信息:
我可以看到color
的红色值被删除而未被使用,我可以看到使用了什么值。通过取消选中该复选框,我可以看到如果删除该规则会发生什么。它使得发现问题变得更加容易。
答案 1 :(得分:0)
好的,在我原来的问题中,我的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."
}
}
});
});