JQuery Validation - error messages on small screen push button down

Question

I created a working email form with a jquery validation error style that appears wheneve there's an error. However, once I make the screen smaller in width or use a small screen. The same error message pushes down the button.

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.

So.. How can I prevent the button from getting pushed down when an error message appears in a small screen or when the browser window is resized?

Here's the code and the 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."           
            }

    }
     });

I put a comment to your first post : [Link](http://stackoverflow.com/questions/36314200/validator-error-message-makes-submit-button-disappear-from-page/#comment60265646_36315020) — Garric, Mar 30 '16 at 23:14
Yes, thank you. I just tested it and it works. I'm going to post the correct code as the answer. — ChosenJuan, Mar 30 '16 at 23:37

Vickel · Accepted Answer · 2016-03-31T20:49:17.233

1

the error-code is displayed after the first input field, which messes up your html and css structure:

add <div class="myerror" style="margin-top:-20px;"></div> after <div class="guestlist">

in your jquery .validate add

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

now the error message appears below the input fields.

edit to answer the comment:

in order to manipulate the error message you have the success function, which you can use like this:

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

Your updated fiddle here

more info from the official site here

edited Mar 31 '16 at 20:49

answered Mar 30 '16 at 23:53

Vickel

7,879
6
35
56

Hi, Vickel. The code you provided has another major flaw the error message doesnt disappear when I enter a correct email address. Here's my a link to my new question: stackoverflow.com/questions/36339205/… – ChosenJuan Mar 31 '16 at 20:17
You should use `$(".myerror").html(error);` . It clear the message and replace the error. – Garric Mar 31 '16 at 20:42

JQuery Validation - error messages on small screen push button down

1 Answers1