Jquery valider plage de dates échoue

J'ai une page HTML avec un formulaire web. Entre autres choses, il comprend les champs de formulaire:

  • Titre de zone de texte
  • SourceName - zone de texte
  • Url - zone de texte
  • FullText - zone de texte
  • PublicationDate - zone de texte à l'aide de jQuery UI datepicker
  • Date de début de zone de texte à l'aide de jQuery UI datepicker
  • EndDate - zone de texte à l'aide de jQuery UI datepicker

Je suis en train de mettre en œuvre le jQuery validateur plusieurs exemple:

jQuery(document).ready(function() {
//a custom method for validating the date range
jQuery.validator.addMethod("dateRange", function() {
var date1 = new Date(jQuery("#StartDate").val());
var date2 = new Date(jQuery("#EndDate").val());
return (date1 < date2);
}, "Please check your dates. The start date must be before the end date.");
//a new class rule to group all three methods
jQuery.validator.addClassRules({
requiredDateRange: { required: true, date: true, dateRange: true }
});
//overwrite default messages
jQuery.extend(jQuery.validator.messages, {
required: "These fields are required",
date: "Please specify valid dates"
});
jQuery("#mainForm").validate({ 
submitHandler: function() {
alert("Valid date range.")
},
groups: {
dateRange: "StartDate EndDate"
},
rules: {
"Title": "required",
"SourceName": "required",
"Url": "required",
"FullText": "required",
"PublicationDate": "required",
"CategoryCount": {required: true, min: 1}
},
messages: {
"Title": "Please type in a headline.",
"SourceName": "Please select a source by typing a few letters and selecting from the choices that pop up.",
"Url": "Please paste or type in a web page link.",
"FullText": "Please paste in the full text of the source report.",
"PublicationDate": "Please provide a date of publication.",
"CategoryCount": "Please specify at least one category."
}
});
//Capture changes to the list of selected categories by 
//storing the count in a hidden field.
jQuery(".categoryCheckbox").click(function() {
var count = new Number(jQuery("#CategoryCount").val());
if (jQuery(this).attr("checked") == true) {
count = count + 1;
} else {
count = count - 1;
}
if (count < 0) {
count = 0
};
jQuery("#CategoryCount").val(count);
});

});

Il valide tous mais la date de la gamme. J'ai essayé de faire un peu plus personnalisé, mais explicitement la création de la Date d'objets avant de l'instruction de retour (dans la démo, c'est sur une seule ligne), mais ce n'est pas bon. Quelqu'un a une expérience dans la fabrication de ce fait le travail?

EDIT:
J'ai ajouté une ligne pour afficher un message d'alerte lorsque le dateRange méthode est appelée, mais elle ne se présente jamais. Je me demande si les groupes et les règles des parties du programme de validation ne fonctionne tout simplement pas ensemble.

InformationsquelleAutor Tim Rourke | 2009-11-05
  1. 1

    Avez-vous vérifié que les valeurs de date1 et date2 sont en fait de se définir? Êtes-vous en faveur 

    $("#StartDate").datepicker();
$("#EndDate").datepicker();

    pour créer le datepickers?

    Comment sur le code html? L'exemple que vous pointez sur eu l'id et le nom des cases de l'ensemble (je ne sais pas si le validateur utilise l'id ou le nom, mais il pourrait être soit à partir de l'échantillon).

    • Les deux attributs id et name pour tous les champs sont les mêmes. Le datepicker est initialisé sur la classe CSS. Cela fonctionne parce que dans un navigateur, je test en utilisant le datepicker de l'INTERFACE utilisateur de fixer les dates.
    • Votre réponse m'a incité à revenir à ajouter une alerte d'appel dans le programme de validation.addMethod("dateRange") d'appel. L'alerte n'apparaît jamais, donc je suppose que la méthode n'est jamais appelée par le validateur.
    InformationsquelleAutor Rob Russell
  2. 1

    Cela fonctionne pour moi, pour s'assurer que le choix de la date n'est pas avant la date en cours:

    $.validator.addMethod("dateRange", function() {
var today = new Date();
var event_date = new Date( $('#event_date').val() );
if( event_date >= today )
return true;
return false;
}, "Please specify a correct date:");

    et:

         rules: {
event_date: { required: true, dateRange: "event_date" },
},
    • Oui, c'est essentiellement ce que j'ai fait dans ma réponse à ma propre question. La différence dans mon cas, j'avais besoin de vérifier deux dates, et si les deux étaient des non-null, s'assurer que la date de fin a été plus tard que le début.
    InformationsquelleAutor J. LaRosee
  3. 1

    Après avoir essayé plusieurs sauvages des variations basées sur la documentation, j'ai trouvé que cette méthode ne fonctionne tout simplement pas la façon dont il est représenté dans l'échantillon. Voici ce que j'ai trouvé que j'avais à faire.
    J'ai ajouté une règle pour la date de fin de champ et l'avait appeler la fonction dateRange. Alors seulement la dateRange fonction feu.

    Le script obtenu est beaucoup plus clair, je pense, me faire soupçonner l'exemple que j'ai vu était obsolète.

    jQuery(document).ready(function() {
//a custom method for validating the date range
jQuery.validator.addMethod("dateRange", function() {
var date1 = new Date(jQuery("#StartDate").val());
var date2 = new Date(jQuery("#EndDate").val());
return (date1 < date2);
}, "Please check your dates. The start date must be before the end date.");
jQuery("#mainForm").validate({
rules: {
"Title": "required",
"SourceName": "required",
"Url": "required",
"FullText": "required",
"PublicationDate": "required",
"SourceName": "required",
"CategoryCount": { required: true, min: 1 },
"EndDate": { required: true, date: true, dateRange: true }
},
messages: {
"Title": "Please type in a headline.",
"SourceName": "Please select a source by typing a few letters and selecting from the choices that pop up.",
"Url": "Please paste or type in a web page link.",
"FullText": "Please paste in the full text of the source report.",
"PublicationDate": "Please provide a date of publication.",
"SourceName": "Please select a source for this report.<br />",
"CategoryCount": "Please specify at least one category.",
"EndDate": "Please check your dates. The start date must be before the end date."
}
});
//Capture changes to the list of selected categories by 
//storing the count in a hidden field.
jQuery(".categoryCheckbox").click(function() {
var count = new Number(jQuery("#CategoryCount").val());
if (jQuery(this).attr("checked") == true) {
count = count + 1;
} else {
count = count - 1;
}
if (count < 0) {
count = 0
};
jQuery("#CategoryCount").val(count);
});
});
    InformationsquelleAutor Tim Rourke