Question

当我点击提交按钮或键入它时，页面中的按钮消失，表单被推送向上错误消息。

如何设置错误消息的样式以防止提交按钮消失并将表单“推送”？

这是代码和小提琴： 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."           
            }

    }

});

Answer 1

由于.error-class的z-index，按钮消失。

首先，你的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类的高度，因为有些文本会被隐藏。

Answer 2

我删除了“z-index：300;”来自.error-class并添加了“margin-bottom：2.5％;”到你的“emailaddress”输入。

<input name="emailaddress" type="text" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" style="margin-bottom: 2.5%;" />

这样，当提交错误出现时，按钮会保留其位置。

验证器错误消息使提交按钮从页面

2 个答案: