Question

我创建了一个带有jquery验证错误样式的工作电子邮件表单，如果出现错误则会出现。但是，一旦我使屏幕宽度变小或使用小屏幕。相同的错误消息按下按钮。

我在错误风格上尝试了位置：绝对 显示：内联块，但没有任何效果。我完全陷入困境，此时我需要更多经验丰富的CSS专家的帮助。

所以.. 如何在小屏幕中显示错误消息或调整浏览器窗口大小时阻止按钮被按下？

以下是代码和小提琴：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 add

中

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

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

编辑以回复评论：

为了操纵错误信息你有成功功能，你可以这样使用：

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

您的更新小提琴https://gist.github.com/jacargentina/be454c13fa19003cf9f48175e82304d5

来自官方网站here

的更多信息

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

1 个答案: