web-dev-qa-db-fra.com

Comment afficher le message de validation sous chaque zone de texte à l'aide de jQuery?

J'essaie de créer un formulaire de connexion dans lequel j'ai l'adresse électronique et le mot de passe comme zone de texte. J'ai effectué la validation sur la partie adresse de courrier électronique afin qu'elle ait une adresse électronique correcte ainsi que sur le chèque vide pour l'adresse de courrier électronique et la zone de texte du mot de passe.

Voici mon jsfiddle .

A partir de maintenant, j'ai ajouté une boîte d'alerte disant, Invalid si la zone de texte de l'adresse électronique et du mot de passe est vide. Au lieu de cela, je voudrais afficher un message simple juste en dessous de chaque zone de texte en disant: veuillez entrer votre adresse électronique ou votre mot de passe s’ils sont vides?

Tout comme cela a été fait ici sur le blog de sitepoint . 

Est-ce possible de le faire sous ma forme HTML actuelle?

Mettre à jour:-

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

Et mes 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>

Je travaille avec JSP et Servlets afin que, dès que je clique sur le bouton Sign In (Connexion), la page de connexion avec l'adresse e-mail et le mot de passe valides m'entraînent plus tôt, mais rien ne se passe lorsque je clique sur le bouton Sign In (Connexion) avec une adresse e-mail et un mot de passe valides. 

Des pensées que pourrait être le problème?

javascriptjqueryhtmlcss
8
john

Vous pouvez placer des éléments statiques après les champs et les afficher, ou injecter le message de validation de manière dynamique. Voir l'exemple ci-dessous pour savoir comment injecter de manière dynamique. 

Cet exemple suit également la meilleure pratique consistant à définir le focus sur le champ vide afin que l'utilisateur puisse facilement résoudre le problème.

Notez que vous pouvez facilement générer cela pour fonctionner avec n'importe quel label et champ (pour les champs obligatoires de toute façon), au lieu de mon exemple qui code spécifiquement chaque validation.

Votre violon est mis à jour, voir ici: jsfiddle

Le 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
    }
});

Le CSS:

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

C'est la solution simple qui peut fonctionner pour vous.

Cochez cette 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();
});});
0
Hamix

est seulement la question de trouver le dom où vous voulez insérer le texte. 

DEMO jsfiddle

$().text();
0
aahhaa

La façon dont je le ferais est de créer des balises de paragraphe où vous voulez que vos messages d'erreur avec la même classe et leur montrer quand les données sont invalides. Voici mon violon

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

J'ai aussi ajouté les balises de paragraphe sous les entrées email et mot de passe

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

Voici:

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>

Et le violon: jsfiddle

0
Cyrille Armanger