Règle de validation personnalisée jQuery - FieldPresent

Ce didacticiel montre comment créer des règles de validation personnalisées pour vos formulaires à l'aide du plugin jQuery.validate.js, en étendant sur un guide précédent sur la configuration de la validation du formulaire. Nous tirons parti de la fonction $.validator.addMethod() pour définir ces règles. Une démonstration vivante est fournie et les exemples incluent le traitement de la validation de la date de naissance. Remarque: Une version corrigée traitant des problèmes de compatibilité et de récursivité entre les navigateurs est incluse.

Exemples:

Les exemples suivants illustrent les règles de validation personnalisées garantissant qu'un nom de nom et de messagerie est rempli. Si l'un est rempli, l'autre doit être aussi bien.

• Validation du champ gauche:
• Validation du champ droit:
• Les deux champs en action (plusieurs paires):

Demo en direct:

(modifier sur jsfiddle)

Code jQuery (version correcée):

Cet extrait amélioré résout les incohérences et les problèmes de récursivité des navigateurs:

// Custom validation: each friend entered must have an email and a name
$.validator.addMethod("fieldPresent", function(value, element, options) {
    var targetEl = $('input[name="' + options.data + '"]'),
        targetEmpty = (targetEl.val() == ''),
        elEmpty = (value == ''),
        bothEmpty = elEmpty && targetEmpty;

    if (!bothEmpty && targetEmpty) {
        setTimeout(function() {
            if (targetEl.closest('.control-group-inner').find('label.fieldPresentError').length == 0) {
                targetEl.addClass('error');
                if (!elEmpty) $(element).closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.closest('.control-group-inner').find('label.fieldPresentError').remove();
                targetEl.after("<label class='fieldPresentError'>Friend's name and email required.</label>");
            }
        }, 500);
    }

    return (bothEmpty || !elEmpty);
}, "Friend's name and email required.");

$('#myForm').validate({
    onkeyup: true,
    rules: {
        "friend1-name": { "fieldPresent": { data: "friend1-email" } },
        "friend1-email": { "fieldPresent": { data: "friend1-name" } }
    },
    submitHandler: function(form) {
        console.log('passed validation.');
        //submit form handler
    }
});

html:

<form id="myForm">
    <div class="control-group">
        <div class="control-group-inner">
            <label for="friend1-name">Friend's name</label>
            <input type="text" name="friend1-name" />
        </div>
        <div class="control-group-inner">
            <label for="friend1-email">Email Address</label>
            <input type="email" name="friend1-email" />
        </div>
    </div>
    <button type="submit">Submit</button>
</form>

CSS:

.control-group {
    width: 100%;
}

.control-group-inner {
    width: 50%;
    float: left;
    display: inline-block;
}

.error {
    border: 1px solid red;
}

label.fieldPresentError {
    color: red;
    display: block;
    margin-top: 5px;
}

Date de validation de naissance (3 entrées):

Cette section montre comment valider une date de naissance à l'aide de trois champs distincts (jour, mois, année):

// Custom validation for dob
$.validator.addMethod("dobValid", function(value, element, options) {
    var day = $('input[name="dob-day"]'),
        month = $('input[name="dob-month"]'),
        year = $('input[name="dob-year"]'),
        anyEmpty = (day.val() == '' || month.val() == '' || year.val() == '');

    if (anyEmpty) {
        day.add(month).add(year).addClass('error');
    } else {
        day.add(month).add(year).removeClass('error');
    }

    return !anyEmpty;
}, "Please enter your date of birth.");

// ... (rest of your validation code, including the rules for dob-day, dob-month, dob-year)

N'oubliez pas d'inclure les balises <script></script> nécessaires pour jQuery et le plugin jQuery Valider dans votre fichier HTML. Ce tutoriel amélioré fournit une solution plus robuste et fiable pour la validation de la forme personnalisée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!