Date largeur Validation rompu jQuery Validation plug-in

Question

jQuery Validation plug-in permet de valider toutes les données de formulaire: http://docs.jquery.com/Plugins/Validation

ont 3 champs pour sélectionner la date de naissance: jour, mois, année.

Premièrement: Comment je peux m'assurer que l'utilisateur sélectionne tous les 3 champs et l'icône 'invalide' s'affiche seulement quand l'un des trois champs n'est pas sélectionné. Par exemple, maintenant j'ai ces 3 champs de sélection, mais quand je sélectionne d'abord et c'est OK, le plugin affiche l'icône 'ok' même si deux autres champs de sélection (mois, année) ne sont pas sélectionnés. Deuxièmement: Comment puis-je valider ces 3 champs de sélection et m'assurer que la personne, quelle date de naissance est sélectionnée dans ces 3 champs de sélection, a plus de 18 ans?

<select name="DOBd" id="DOBd"> 
    <option value="">DD</option> 
    // day options 
</select> 
<select name="DOBm" id="DOBm"> 
    <option value="">MM</option> 
    // month options 
</select> 
<select name="DOBy" id="DOBy"> 
    <option value="">YYYY</option> 
    // year options 
</select> 

Aussi je mis en place cette icône « erreur » apparaît pas après chacun d'eux, mais après tous:

groups:{ 
    date_of_birth:"DOBd DOBm DOBy" 
}, 
errorPlacement:function(error,element){ 
    if (element.attr("name") == "DOBd" || element.attr("name") == "DOBm" || element.attr("name") == "DOBy") 
     error.appendTo(element.parent("td").next("td")); 
    else 
     error.appendTo(element.parent("td").next("td")); 
}, 

Answer 1

Vous pouvez ajouter des méthodes personnalisées à l'aide $.validator.addMethod

Ajouter deux méthodes: une pour vérifier les 3 sélections (FullDate) et une pour vérifier l'âge (Age). Comme les 3 éléments sont regroupés, je mets une méthode sur un sélecteur et l'autre sur un autre sélecteur.

En outre, votre errorPlacement fonction a un if/else qui fait exactement la même chose, ce qui n'est pas nécessaire.

$(function() { 
    // this function requires month day and year selections 
    $.validator.addMethod("FullDate", function() { 
    //if all values are selected 
    if($("#DOBd").val() != "" && $("#DOBm").val() != "" && $("#DOBy").val() != "") { 
     return true; 
    } else { 
     return false; 
    } 
    }, '<img src="/path/to/image.png" alt="Please select a day, month, and year" title="Please select a day, month, and year" />'); 

    // this function checks the selected date, returning true if older than 18 years 
    $.validator.addMethod("Age", function() { 
    //only compare date if all items have a value 
    if($("#DOBd").val() != "" && $("#DOBm").val() != "" && $("#DOBy").val() != "") { 
     //get selected date 
     var DOB = new Date($("#DOBy").val(), $("#DOBm").val(), $("#DOBd").val()); 
     var eday = new Date(); //get today 
     eday.setFullYear(eday.getFullYear() - 18); //set to eighteen years ago 
     //if older than 18 
     if(DOB < eday) { 
     return true; 
     } else { 
     return false; 
     } 
    } 
    return true; 
    }, '<img src="/path/to/image.png" alt="Must be 18" title="Must be 18" />'); 

    $("form").validate({ 
    rules: { 
     DOBd: "FullDate", 
     DOBm: "Age" 
    }, 
    groups:{ 
     date_of_birth:"DOBd DOBm DOBy" 
    }, 
    errorPlacement:function(error,element){ 
     error.appendTo(element.parent("td").next("td")); 
    } 
    });  
});