验证器错误消息使提交按钮从页面消失 [英] Validator Error Message makes submit button disappear from page
问题描述
当我点击提交按钮或输入从页面消失，表单 向上。
When I click on the submit button or type it makes the button disappear from the page, and the form is pushed up by the error message.
如何设定错误讯息的格式，以防止提交按钮消失并将表单向上推？
这里是代码和小提琴：
http：// jsfiddle。 net / psbq8vkj / 1 /
Here's the code and the fiddle: http://jsfiddle.net/psbq8vkj/1/
CSS ：
.error-class {
color:red; z-index:300; font-size:25px;
}
.guestlistfield.error-class {
position:relative; margin:0 auto; display:inline-block;
}
input.error-class { border:3px solid red;}
input.error-class:focus { border:3px solid #f90;}
.valid-class {
color:black;
}
.emailaddress:focus, textarea:focus {
border:3px solid #f90;
}
@media (min-width:765px) {
.guestlist
{
overflow: hidden;
width:100%; max-width:730px; margin-top:20px;
height:120px; display:inline-block;
}
.guestlist .title h2
{
color: rgba(0,0,0,0.8);
}
}
@media (max-width:764px) {
.guestlist
{
overflow: hidden;
width:100%; min-width:200px;
height:120px; padding-bottom:20px; padding-bottom:10px;
text-align:left;
}
.guestlist .title h2
{
color: rgba(0,0,0,0.8);
}
}
@media (min-width:765px) {
.guestlist2
{
overflow: hidden;
width:100%;
height:120px; display:inline-block;
}
.guestlist2 .title h2
{
color: rgba(0,0,0,0.8);
}
}
@media (max-width:764px) {
.guestlist2
{
overflow: hidden;
width:100%;
height:90px; padding-bottom:20px; padding-bottom:10px;
text-align:left;
}
.guestlist2 .title h2
{
color: rgba(0,0,0,0.8);
}
}
.guestlistfield
{
position: relative;
-webkit-appearance: none;
border: 0;
background: #fff;
background: rgba(255,255,255,0.75);
width:98%; position:relative;
border-radius: 0.50em;
margin: 1em 0em; display:inline-block;
padding: 1.50em 1em; padding-right:90px;
box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
border: solid 3px rgba(0,0,0,0.15);
-moz-transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
font-size: 1em;
outline: none;
}
form input.guestlistfield:enabled,
form select:enabled,
form textarea:enabled
{
background:#fff;
}
form textarea
{
min-height: 12em;
}
ff
form .formerize-placeholder
{
color: #555 !important;
}
form ::-webkit-input-placeholder
{
color: #555 !important;
}
form :-moz-placeholder
{
color: #555 !important;
}
form ::-moz-placeholder
{
color: #555 !important;
}
form :-ms-input-placeholder
{
color: #555 !important;
}
form ::-moz-focus-inner
{
border: 0;
}
/* Button Style */
.button
{
display: inline-block; background:transparent;
padding: 1em 1em 1em 1em;
line-height:3.7em; position:relative;
text-decoration: none;
border-left: solid #F90 4px; height:55px;
font-weight:600; float: right; line-height:3px;
font-size:1em; right:10px; border-right:none; border-top:none; border-bottom:none;
color:#787878; top:-75px; vertical-align:center; font-size:bolder;
}
.button:focus
{
display: inline-block; background:transparent;
padding: 1em 1em 1em 1em;
line-height:3.7em; position:relative;
text-decoration: none;
border-left: solid #F90 4px; height:55px;
font-weight:600; float: right; line-height:3px;
font-size:1em; right:10px; border-right:none; border-top:none; border-bottom:none;
color:#787878; top:-75px; vertical-align:center; font-size:bolder;
}
.button:hover
{
color:#000; border-left: solid #39F 4px;
}
#updates
{
background:rgba(51, 153, 255, 0.7); width:100vw; left:0;
}
@media (max-width:280px) {
.signuptitle {font-size:15px; color:#fff; margin-top:50px;}
}
@media (min-width:281px) {
.signuptitle {font-size:20px; color:#fff; text-shadow:1px 1px #000; margin-top:50px;}
}
@media (min-width: 659px){
.signuptitle {font-size:30px; color:#fff; text-shadow:2px 2px #000; margin-top:50px;}
}
HTML：
<div id="updates" class="container-fluid">
<center>
<div class="title">
<br /><span class="signuptitle">Sign up to our daily newsletter.</span> <br /></div>
<div class="guestlist">
<form class="guestlist-form" action="email.php" method="post">
<input name="emailaddress" type="text" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
<input class="button" title="Join" type="submit" value="Sign up">
</form>
</div>
</center>
<br> <br>
</div>
JQUERY：
$(".guestlist-form").validate({
errorClass: "error-class",
validClass: "valid-class",
rules: {
emailaddress: {
required: true,
email: true
}
},
messages: {
emailaddress: {
required: "Please enter your full email address."
}
}
});
推荐答案
由于z-索引.error-class。
The button disapear because of the z-index of the .error-class.
首先，在jsfiddle中的.guestlist-form和.error-class之间缺少一个空格，因此没有应用z- 6 in jsfiddle）
First, a space is missing between .guestlist-form and .error-class in your jsfiddle, so the z-index was not applied (Line 6 in jsfiddle)
.guestlist-form .error-class {
color:red; z-index:1;
}
您可以添加此属性来设置提交按钮的z-index
And you can add this to set the z-index for the submit button
.guestlist-form .button {
z-index:2;
}
对于向上推的形式，这是因为提交按钮有 top：-75px; ，并且将 margin：0 auto; 添加到 .guestlistfield class时有错误。删除边距，表单将不再向上推。 （jsfiddle中的第10行）
For the form pushing up, it's because the submit button have top: -75px; and you have put margin:0 auto; to the .guestlistfield class when there are an error. Remove the margin and the form will no longer pushing up. (Line 10 in jsfiddle)
.guestlistfield.error-class {
position:relative; /*margin:0 auto;*/ display:inline-block;
}
最后，我建议你增加 .guestlist 类，因为某些文本将被隐藏。
Finally, I suggest you to increase the height of the .guestlist class, because some of the text will be hidden.
这篇关于验证器错误消息使提交按钮从页面消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
