JQuery Validierung - Fehlermeldungen auf dem kleinen Bildschirm Taste

Question

Ich erstellte eine funktionierende E-Mail-Formular mit einem Jquery-Validierungsfehlerstil, der erscheint, wenn es einen Fehler gibt. Sobald ich jedoch den Bildschirm in der Breite kleiner mache oder einen kleinen Bildschirm benutze. Die gleiche Fehlermeldung drückt die Taste.

habe ich Position versucht: absolute auf dem Fehler Stil und display: inline-block, aber nichts funktioniert. Ich bin völlig festgefahren, und an dieser Stelle brauche ich die Hilfe eines erfahrenen CSS-Experten.

So .. Wie kann ich verhindern, dass die Schaltfläche immer nach unten gedrückt wird, wenn eine Fehlermeldung in einem kleinen Bildschirm erscheint oder wenn das Browser-Fenster der Größe verändert wird?

Hier ist der Code und die Geige: 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

der Fehler-Code nach dem ersten Eingabefeld angezeigt wird, die Ihre HTML und CSS-Struktur vermasselt:

hinzufügen <div class="myerror" style="margin-top:-20px;"></div> nach

in Ihrem jquery .validate

hinzufügen

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

jetzt erscheint die Fehlermeldung unter den Eingabefeldern.

bearbeiten Kommentar zu beantworten:

, um die Fehlermeldung Sie den Erfolg Funktion zu manipulieren, die Sie wie folgt verwenden können:

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

Ihre aktualisierte Geige here

mehr Infos von der offiziellen Website here