Je travaille sur un formulaire et j'ai ajouté mes propres messages d'erreur que je ne souhaite afficher que lorsque l'utilisateur saisit un texte incorrect.

Le HTML est le suivant:

<div class="form-group">
    <div class="col-md-6">
        <label class="control-label">First Name</label><span class="form-warning">(First Name can only contain letters)</span>
        <div>
            <span class="first-name">
                <input type="text" name="first-name" value="" size="40" maxlength="80" minlength="2">
            </span>
            <i class="fa fa-times hide"></i><i class="fa fa-check hide"></i>
        </div>
    </div>
    <div class="col-md-6">
        <label class="control-label">Last Name</label><span class="form-warning">(Last Name can only contain letters)</span>
        <div>
            <span class="last-name">
                <input type="text" name="last-name" value="" size="40" maxlength="80" minlength="2">
            </span>
            <i class="fa fa-times hide"></i><i class="fa fa-check hide"></i>
        </div>
    </div>
</div>

Les deux champs autorisent uniquement la saisie de lettres. Tout cela est vérifié avec un regex côté client. J'ai également une validation côté serveur, mais c'est un problème distinct.

Quoi qu'il en soit, le code qui vérifie l'entrée se présente comme suit:

function name(e) { //First and Last Name
        var n = new RegExp(/^[A-Za-z -]+$/);
        return n.test(e);
    }
function invalid(input) {
        input.css({"background": "rgb(237, 209, 209)", "color": "red", "border": "1px solid red"});
        input.parents().find('.form-warning').removeClass('hide'); //Show Warning
        input.parent().nextAll(".fa-times").removeClass('hide');
        input.parent().nextAll(".fa-check").addClass('hide');
    }
    //Valid input show fa-check and highlight green
    function valid(input) {
        input.css({"background": "rgb(209, 237, 209)", "color": "green", "border": "1px solid green"});
        input.parents.find('.form-warning').addClass('hide'); //Hide Warning
        input.parent().nextAll(".fa-times").addClass('hide');
        input.parent().nextAll(".fa-check").removeClass('hide');
    }
function validate(input, type) {
        if (input.val() === "") {
            reset(input);
        }
        else {
            if (!type(input.val())) {
                invalid(input);
            } else {
                valid(input);
            }
        }
    }
//First Name
    $("input[name='first-name']").keyup(function () {
        validate($(this), name);
    });
    //Last Name
    $("input[name='last-name']").keyup(function () {
        validate($(this), name);
    });

Le problème que j'ai est que cette ligne:

    input.parents.find('.form-warning').addClass('hide'); //Hide Warning

Et cette ligne:

    input.parents().find('.form-warning').removeClass('hide'); //Show Warning

S'applique aux deux champs lorsque le prénom est invalide / valide et le nom de famille invalide / valide. Idéalement, j'aimerais être en mesure de trouver le form-warning le plus proche de l'entrée en question et de l'afficher / masquer UNIQUEMENT.

Est-ce que quelqu'un a des suggestions?

0
Javacadabra 21 juil. 2015 à 17:29

2 réponses

Meilleure réponse

Qu'en est-il de:

input.closest('.col-md-6').find('.form-warning:first').removeClass('hide');

Vous semblez aller trop haut dans votre dom, alors limitez-le via .closest(), ce qui est fondamentalement .parents('<sel>:first')

3
birdspider 21 juil. 2015 à 14:36

Veuillez essayer le code ci-dessous, cela peut vous aider

Input.parent (). find ('. form-warning'). removeClass ('hide');

0
Vasu Nanguluri 21 juil. 2015 à 15:06