validation器错误消息使提交按钮从页面消失
当我单击提交按钮或键入它使按钮从页面中消失 ，并且表单被错误消息向上 推 。
如何设置错误消息的样式以防止提交按钮消失并将表单“推送”？
这是代码和小提琴： 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：
Sign up to our daily newsletter.
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." } } });
由于.error类的z索引，该按钮消失。
首先，你的jsfiddle中.guestlist-form和.error-class之间缺少一个空格，所以没有应用z-index（jsfiddle中的第6行）
.guestlist-form .error-class { color:red; z-index:1; }
您可以添加此项以设置提交按钮的z-index
.guestlist-form .button { z-index:2; }
对于推送的表单，这是因为提交按钮具有top: -75px; 你已经把margin:0 auto; 发生错误时到.guestlistfield类。 删除边距，表格将不再向上推。 （jsfiddle中的第10行）
.guestlistfield.error-class { position:relative; /*margin:0 auto;*/ display:inline-block; }
最后，我建议你增加.guestlist类的高度，因为有些文本会被隐藏。
我删除了“z-index：300;” 来自.error-class并增加了“保证金底部：2.5％;” 到你的“emailaddress”输入。
这样，当提交错误出现时，按钮会保持其位置。