2016-02-24 2 views
0

Ceci est mon code html avec un extrait du code que j'essaie d'utiliser pour invalider/valider les entrées de date avec, je l'espère, toutes les variables correspondantes et nécessaires déclarées.Tout à fait invalider/valider les dates correctement (date d'arrivée)?

 <html> 
     <head> 
     <title> Booking Page </title> 

     <script> 

     function Booking(){ 

     var departuredate = document.getElementById("departdate").value; //departure date selected by user 
     var arrivaldate = document.getElementById("arrivedate").value; //arrival date selected by user 

     departuredate = new Date(departuredate); 
     arrivaldate = new Date(arrivaldate); 

     CurrentDate = new Date(); //todays date 

       month = '' + (arrivaldate.getMonth() + 1), 
       day = '' + arrivaldate.getDate(), 
       year = arrivaldate.getFullYear(); 
       var adate = [day, month, year].join('/'); 
       alert(adate); 

l'adate est pour la date d'arrivée seulement. Je prévois de simplement copier et ajuster le code une fois qu'il est correct pour la date de départ. Actuellement, le code semble invalider toutes les entrées, ne permettant pas de valider des entrées complètement valides.

  var re = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/; 
     if (!adate.match(re)) 
     { 
      document.getElementById("temp").innerHTML = "Incorrect format" 
      document.MyForm.arrivedate.focus(); 
      document.getElementById("arrivedate").style.border='1px solid red'; 
      return false; 
      } 

      else 
      { 
      // if none of the above situaton's occur then the input is true and validated 
      alert('Dates are validated'); 
      return true;   
      } 

      } 
      </script> 

      </head> 
      <body> 

      <H1> Booking Form </H1> 

      <Form action="testpage.py" method="POST" name="MyForm" onsubmit="return Booking()"> 


      <p>Departure Date:</p> 
      <input type=date name="departdate" id="departdate" > 

      <p>Arrival Date:</p> 
      <input type=date name="arrivedate" id="arrivedate"> 

      <input type=submit value="Find flights"> 

      </Form>   
      </body> 
      </html> 
+0

Je recommande fortement d'utiliser momentjs.com pour la validation/manipulation de votre date –

Répondre

0

Vous avez plusieurs problèmes ici. La première est que le type de date pour les entrées n'est pas standard, donc cela ne fonctionnera pas dans la plupart des navigateurs (les versions IIRC chrome, edge et iOS safari sont les exceptions).

Je vous recommande d'utiliser une bibliothèque tierce comme jquery-ui-datepicker ou d'utiliser une entrée de texte avec la logique de validation en utilisant l'attribut pattern html ou un gestionnaire d'événements js si vous devez ne supporte pas l'attribut pattern).

Quelque chose comme <input type="text" pattern="/[0-9]{2}\/[0-9]{2}\/[0-9]{4}/" ...

Ou si le modèle ne fonctionne pas:

var myDateInput = document.getElementById('date-input'); 
myDateInput.addEventListener('change', function(e) { 
    if (!(e.target.value.match(dateRegex)) { 
    //let user know somehow 
    } 
}); 

Vous pouvez étrangler le gestionnaire afin qu'il ne se déclenche pas sur les frappes successives. Notez également que même dans les navigateurs avec le type d'entrée de date ils attendent le format "aaaa-mm-jj", alors faites votre regex:

/[0-9]{4}-[0-9]{2}-[0-9]{2}/.