JQuery 验证 - 小屏幕上的错误消息按下按钮

Question

我创建了一个有效的电子邮件表单，其中包含 jquery 验证错误样式，只要出现错误就会出现。但是，一旦我缩小屏幕宽度或使用小屏幕。同样的错误消息按下按钮。

I've tried position: absolute on the error style and display:inline-block, but nothing works. I'm completely stuck, and at this point I need the help of more a seasoned css expert.

所以..当小屏幕上出现错误消息或调整浏览器窗口大小时，如何防止按钮被按下？

这是代码和 fiddle :http://jsfiddle.net/psbq8vkj/4/

CSS:

.error-class {
    color:red;  z-index:1; font-size:15px; 
}

.guestlist-form.error-class {
    color:red;  z-index:1;
}

.guestlistfield.error-class {
   position:relative; display:inline-block;
}

.guestlist-form .button {
   position:relative; z-index:2;
}



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:130px; 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);
    }

    .guestwrap
    {
        text-align:center; width:100%;
    }
}


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






/*********************************************************************************/
/* Portfolio                                                                     */
/*********************************************************************************/


#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>

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

错误代码显示在第一个输入字段之后，这会打乱您的 html 和 css 结构:

添加<div class="myerror" style="margin-top:-20px;"></div>在 <div class="guestlist"> 之后

在你的 jquery.validate 添加

errorPlacement: function(error, element) {
  $(".myerror").html(error)
},

现在错误消息显示在输入字段下方。

编辑以回答评论:

为了处理错误消息，您可以使用成功函数，您可以像这样使用它:

success: function(label) {
    label.addClass("valid-class").text("Ok!")
}

你更新的 fiddle here

更多信息来自官方网站here