Wie Validierungsnachricht unter jedem Textfeld mit jquery anzeigen?

Ich versuche, ein Login-Formular zu machen, in dem ich E-Mail-Adresse und Passwort als Textbox habe. Ich habe die Validierung für den E-Mail-Adresse Teil, so dass es richtige E-Mail-Adresse haben und auch auf die leere Kontrollkästchen sowohl für E-Mail-Adresse und Passwort Textfeld.Wie Validierungsnachricht unter jedem Textfeld mit jquery anzeigen?

Hier ist meine jsfiddle.

Ab sofort habe ich eine Warnmeldung hinzugefügt, die besagt, Invalid, wenn E-Mail-Adresse und Kennwort Textfeld leer ist. Stattdessen möchte ich eine einfache Nachricht direkt unter jedem Textfeld anzeigen, die besagt, bitte geben Sie Ihre E-Mail-Adresse oder Ihr Passwort ein, wenn sie leer sind.

Genau wie es hier auf sitepoint blog getan wurde.

Ist dies in meiner aktuellen HTML-Form möglich?

Update: -

<body> 

    <div id="login"> 

     <h2> 
      <span class="fontawesome-lock"></span>Sign In 
     </h2> 

     <form action="login" method="POST"> 
      <fieldset> 
       <p> 
        <label for="email">E-mail address</label> 
       </p> 
       <p> 
        <input type="email" id="email" name="email"> 
       </p> 
       <p> 
        <label for="password">Password</label> 
       </p> 
       <p> 
        <input type="password" name="password" id="password"> 
       </p> 
       <p> 
        <input type="submit" value="Sign In"> 
       </p> 

      </fieldset> 

     </form> 

    </div> 
    <!-- end login --> 

</body>

Und mein js -

<script> 
    $(document).ready(function() { 
     $('form').on('submit', function (e) { 
      e.preventDefault(); 

      if (!$('#email').val()) { 
       if ($("#email").parent().next(".validation").length == 0) // only add if not added 
       { 
        $("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>"); 
       } 
      } else { 
       $("#email").parent().next(".validation").remove(); // remove it 
      } 
      if (!$('#password').val()) { 
       if ($("#password").parent().next(".validation").length == 0) // only add if not added 
       { 
        $("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>"); 

       } 
      } else { 
       $("#password").parent().next(".validation").remove(); // remove it 
      } 
     }); 
    }); 

</script>

Ich arbeite mit JSP und Servlets so, sobald ich Schaltfläche Anmelden klicken, es nahm mich zu einem anderen Seite mit gültiger E-Mail und Passwort früher, aber jetzt passiert nichts, nachdem ich auf die Schaltfläche Anmelden mit gültiger E-Mail und Passwort geklickt habe.

Irgendwelche Gedanken was könnte falsch sein?

Quelle

2014-08-29 john

könnten Sie statische Elemente nach den Feldern setzen und zeigen ihnen, oder Sie können die Validierungsnachricht dynamisch injizieren. Im folgenden Beispiel sehen Sie, wie Sie dynamisch injizieren.

Dieses Beispiel folgt auch der bewährten Methode, den Fokus auf das leere Feld zu setzen, damit der Benutzer das Problem problemlos beheben kann.

Beachten Sie, dass Sie dies leicht generalisieren können, um mit einem beliebigen Feld & (für erforderliche Felder) zu arbeiten, anstelle von meinem Beispiel, das jede Validierung spezifisch codiert.

Ihre Geige aktualisiert wird, finden Sie hier: jsfiddle

Der Code:

$('form').on('submit', function (e) { 
    var focusSet = false; 
    if (!$('#email').val()) { 
     if ($("#email").parent().next(".validation").length == 0) // only add if not added 
     { 
      $("#email").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter email address</div>"); 
     } 
     e.preventDefault(); // prevent form from POST to server 
     $('#email').focus(); 
     focusSet = true; 
    } else { 
     $("#email").parent().next(".validation").remove(); // remove it 
    } 
    if (!$('#password').val()) { 
     if ($("#password").parent().next(".validation").length == 0) // only add if not added 
     { 
      $("#password").parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>"); 
     } 
     e.preventDefault(); // prevent form from POST to server 
     if (!focusSet) { 
      $("#password").focus(); 
     } 
    } else { 
     $("#password").parent().next(".validation").remove(); // remove it 
    } 
});

Die CSS:

.validation 
    { 
     color: red; 
     margin-bottom: 20px; 
    }

Quelle

2014-08-29 17:15:41 nothingisnecessary

+1 für die Verwendung von append als append hat das Potenzial, mehr und mehr Elemente in einigen hinzuzufügen Fälle. – Mic1780

Danke, aber auch "nachher", obwohl es sie vor der letzten Validierung einfügen würde. Ich habe dies angesprochen, indem ich ".length == 0" vor der Verwendung von '.after()' – nothingisnecessary

@nothingisnecessary überprüft habe. Dies funktioniert gut für die Validierung. Aber sobald ich auf "Anmelden" klicke, nachdem ich eine gültige E-Mail und ein gültiges Passwort erhalten habe, komme ich nicht auf eine andere Seite, sondern auf der gleichen Seite, als nichts passiert ist, nachdem ich mit einer gültigen E-Mail und einem Passwort auf die Schaltfläche Anmelden geklickt habe. Ich habe die Frage so aktualisiert, wie ich sie benutze. Früher brachte es mich dazu, auf die richtige Seite zu gehen, nachdem ich die Schaltfläche "Anmelden" mit gültiger E-Mail und Passwort gedrückt hatte. Sehen Sie mein Aktionstag in der Form, die ich mit Servlets verwende. – john

ist nur die Frage der Dom, wo Sie den Text einfügen möchten.

DEMO jsfiddle

$().text();

Quelle

2014-08-29 17:11:41 aahhaa

So wie ich das tun würde, es Absatz-Tags zu erstellen, wo Sie Ihre Fehlermeldungen mit der gleichen Klasse wollen, und sie zeigen, wenn die Daten ungültig sind. Hier ist my fiddle

if ($('#email').val() == '' || !$('#password').val() == '') { 
    $('.loginError').show(); 
    return false; 
}

ich auch die Absatz-Tags unter den E-Mail und Passwort Eingänge hinzugefügt

<p class="loginError" style="display:none;">please enter your email address or password.</p>

Quelle

2014-08-29 17:12:43 Mic1780

Generell stimme ich für Login-Formulare mit Ihrem Ansatz, aber OP fragte: „Ich möchte eine einfache Botschaft zeigen, gerade unter jedem Textfeld“ nicht eine einzelne Nachricht für alle Felder. – nothingisnecessary

@nothingisnecessary Ich lese es so, wie er die gleiche Nachricht haben möchte, egal ob beide leer sind oder ob man eine Eingabe hat. Generell separiere ich Fehlermeldungen. – Mic1780

Ich brauche separate Fehlermeldungen. Tut mir leid, wenn ich nicht klar war. – john

Hier gehen Sie:

JS:

$('form').on('submit', function (e) { 
    e.preventDefault(); 

    if (!$('#email').val()) 
     $('#email').parent().append('<span class="error">Please enter your email address.</span>'); 


    if(!$('#password').val()) 
     $('#password').parent().append('<span class="error">Please enter your password.</span>'); 
});

CSS:

@charset "utf-8"; 
/* CSS Document */ 

/* ---------- FONTAWESOME ---------- */ 
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */ 
/* ---------- http://weloveiconfonts.com/ ---------- */ 

@import url(http://weloveiconfonts.com/api/?family=fontawesome); 

/* ---------- ERIC MEYER'S RESET CSS ---------- */ 
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */ 

@import url(http://meyerweb.com/eric/tools/css/reset/reset.css); 

/* ---------- FONTAWESOME ---------- */ 

[class*="fontawesome-"]:before { 
    font-family: 'FontAwesome', sans-serif; 
} 

/* ---------- GENERAL ---------- */ 

body { 
    background-color: #C0C0C0; 
    color: #000; 
    font-family: "Varela Round", Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    line-height: 1.5em; 
} 

input { 
    border: none; 
    font-family: inherit; 
    font-size: inherit; 
    font-weight: inherit; 
    line-height: inherit; 
    -webkit-appearance: none; 
} 

/* ---------- LOGIN ---------- */ 

#login { 
    margin: 50px auto; 
    width: 400px; 
} 

#login h2 { 
    background-color: #f95252; 
    -webkit-border-radius: 20px 20px 0 0; 
    -moz-border-radius: 20px 20px 0 0; 
    border-radius: 20px 20px 0 0; 
    color: #fff; 
    font-size: 28px; 
    padding: 20px 26px; 
} 

#login h2 span[class*="fontawesome-"] { 
    margin-right: 14px; 
} 

#login fieldset { 
    background-color: #fff; 
    -webkit-border-radius: 0 0 20px 20px; 
    -moz-border-radius: 0 0 20px 20px; 
    border-radius: 0 0 20px 20px; 
    padding: 20px 26px; 
} 

#login fieldset div { 
    color: #777; 
    margin-bottom: 14px; 
} 

#login fieldset p:last-child { 
    margin-bottom: 0; 
} 

#login fieldset input { 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

#login fieldset .error { 
    display: block; 
    color: #FF1000; 
    font-size: 12px; 
} 
} 

#login fieldset input[type="email"], #login fieldset input[type="password"] { 
    background-color: #eee; 
    color: #777; 
    padding: 4px 10px; 
    width: 328px; 
} 

#login fieldset input[type="submit"] { 
    background-color: #33cc77; 
    color: #fff; 
    display: block; 
    margin: 0 auto; 
    padding: 4px 0; 
    width: 100px; 
} 

#login fieldset input[type="submit"]:hover { 
    background-color: #28ad63; 
}

HTML:

<div id="login"> 

<h2><span class="fontawesome-lock"></span>Sign In</h2> 

<form action="javascript:void(0);" method="POST"> 

    <fieldset> 

     <div><label for="email">E-mail address</label></div> 
     <div><input type="email" id="email" /></div> 

     <div><label for="password">Password</label></div> 
     <div><input type="password" id="password" /></div> <!-- JS because of IE support; better: placeholder="Email" --> 

     <div><input type="submit" value="Sign In"></div> 

    </fieldset> 

</form>

Und die Geige: jsfiddle

Quelle

2014-08-29 17:14:22

-1, da Ihre Lösung weiterhin Validierungsetiketten hinzufügt, anstatt zu prüfen, ob sie bereits vorhanden sind (auf der Fidel klicken Sie mehrmals hintereinander auf die Schaltfläche) – nothingisnecessary

Dies ist die einfache Lösung kann für Sie arbeiten.

Check this solution

$('form').on('submit', function (e) { 
e.preventDefault(); 
var emailBox=$("#email"); 
var passBox=$("#password"); 
if (!emailBox.val() || !passBox.val()) { 
    $(".validationText").text("Please Enter Value").show(); 
} 
else if(!IsEmail(emailBox.val())) 
{ 
    emailBox.prev().text("Invalid E-mail").show(); 
} 
$("input#email, input#password").focus(function(){ 
    $(this).prev(".validationText").hide(); 
});});

Quelle

2014-08-29 18:13:23 Hamix

Wie Validierungsnachricht unter jedem Textfeld mit jquery anzeigen?

Antwort

Verwandte Themen