Je veux créer une validation de formulaire javascript très simple. J'ai deux zones de saisie remplies par un sélecteur datetime. le sélecteur de datetime remplit la zone de saisie au format 2011-12-21 09:58. J'ai une boîte de saisie pour la date de collecte et la date d'arrivée.

Je veux valider que le «deliverydatetime» entré est supérieur au «collectdatetime».

La sortie d'une validation qui a échoué devrait simplement être dans une fenêtre contextuelle disant 'deliverydate' avant 'coolectdate'.

Cela peut-il être fait avec javascript et si oui, quelqu'un peut-il me donner un bref exemple?

Mon code de formulaire html de base est:

...
<td>
<input type="text" id="collectdatetime" name="collectdatetime">
</td>
<td>
<input type="text" id="deliverdatetime" name="deliverdatetime" >
</td>
...

Merci d'avance pour l'assistance et bonnes vacances à tous.

Cordialement, Ryan Smith

1
Smudger 21 déc. 2011 à 12:03

3 réponses

Meilleure réponse

GAven le format ISO8601 de la chaîne de date / heure, vous pouvez simplement comparer les valeurs sous forme de chaînes. C'est l'une des beautés de l'utilisation d'un format ISO8601. Vous avez demandé que le délai de livraison soit postérieur à celui de la collecte, ce qui me semble à l'envers mais de toute façon…

<form onsubmit="return checkDates(this)">
  <table>
    <tr>
      <td>
        <input type="text" id="collectdatetime" name="collectdatetime">
      <td>
        <input type="text" id="deliverdatetime" name="deliverdatetime">
      <td>
        <input type="submit">
  </table>
</form>

<script>
function checkDates(form) {
  if (form.collectdatetime.value >= form.deliverdatetime.value) {
    alert('Collection time must be after deliver time');
    return false;
  }
}
</script>
1
RobG 21 déc. 2011 à 19:40

Vous pourriez faire quelque chose comme ça:

var collectTime = (new Date(document.getElementById("collectdatetime").value)).getTime(),
    deliverTime = (new Date(document.getElementById("deliverdatetime").value)).getTime();
if(deliverTime > collectTime) {
    //Ok!
}

Cela crée 2 Date objets, en passant les valeurs sélectionnées au constructeur, puis compare les temps. La méthode getTime renvoie un nombre représentant l'heure qui s'est écoulée depuis le 1er janvier 1970 00:00:00 en millisecondes.

Voici un exemple de travail.

1
James Allardice 21 déc. 2011 à 08:12

Vous pouvez créer un objet Date à partir de ces valeurs et les comparer:

var collect = new Date($('#collectdatetime').val());
var delivery = new Date($('#deliverdatetime').val());

if (delivery < collect) {
    alert('Delivery date before collect!');
}
0
Mateusz W 21 déc. 2011 à 08:10