Validation de temps (et comparaison) en utilisant Javascript/JQuery

Question

Tout d'abord m'excuser d'avoir créé ma troisième question Javascript en autant de jours - j'essaie vraiment de me dépasser dans ce domaine et de sentir que mes compétences se développent à un taux assez bon grâce à mes recherches et votre aide fantastique sur ici, en particulier redsuqare !! J'ai un tableau où les gens peuvent entrer des heures, et avoir un masque en place où il va vérifier que l'entrée est au format 99:99 - ce qui est génial, mais idéalement je veux le limiter à pas plus de 23:59!

Voici le code que j'ai en ce moment, bricolé le mieux que je peux, mais ne fonctionne pas sans surprise ...

$.each($('#hoursavailable tr td :checkbox'), function() { 

    var $this = $(elem); // cache the object 
    var $row = $this.closest('tr'); // find the nearest table row 
    if($this.is(':checked')) { 
     // do nothing! 
    } else { 
     $row.each(':text'),function() { 
      var splittime = $(this).split(":"); 
      if(splittime[0] > 22 || splittime[1] > 58) { 
       alert('please enter a valid date'); return false; 
      } 
     } 
    } 
}); 

pourrait également être intéressant de noter qu'il ya deux entrées par ligne/tr - il serait absolument idéal si je pouvais en quelque sorte comparer les deux, pour faire en sorte que le premier est avant la seconde, mais apprécier cela pourrait être encore plus au-delà de moi que les choses actuel :(

Merci

Answer 1

Vous allez fou avec vos eaches quand vous avez vraiment besoin d'un seul

Cela devrait vous aller avec quelques mises en garde comme décrit ci-dessous.

$("#hoursavailable :checked").each(function() { 
     var splittime = $(this).parents("tr").find(":text").val().split(":"); 
     if (splittime[0] > 22 || splittime[1] > 58) { 
      alert('please enter a valid date'); 
      return false; 
     }   
    }); 

Je suis supposé ici que vous avez une seule zone de texte (d'où .Find (« : texte ».) sur le parent Vous pouvez envisager d'ajouter une classe, mais gardez à l'esprit que les sélecteurs de classe sont lent.

Il n'y a pas de validation ici, donc vous pouvez ajouter un peu plus, mais le principe fonctionne.

Answer 2

Je pense que tout ce dont vous avez besoin est le changement suivant depuis votre faire un chaque autour des entrées de texte, donc vous devez obtenir la valeur et diviser cela.

$row.find(':text').each(function() { 
      var splittime = $(this).val().split(":"); 
      if(splittime[0] > 22 || splittime[1] > 58) { 
        alert('please enter a valid date'); return false; 
      } 
}); 

Cependant, pour vous sauver réinventer la roue pourquoi ne pas regarder dans le validate plugin où vous pouvez configurer les expressions regex pour faire face à la validation des données.

Bien que j'apprécie le roulement à la main est également une bonne courbe d'apprentissage.

Answer 3

Cela peut être ce que vous recherchez-

http://www.the-art-of-web.com/javascript/validate-date/

Answer 4

Synthèse de différentes méthodes pour vérifier le format maximum & ensemble.

var timeFieldValue = $(this).val(); 
    re = /^\d{1,2}:\d{2}([ap]m)?$/; 
    if(timeFieldValue != '' && !timeFieldValue.match(re)) { 
     alert("Invalid time format: " + timeFieldValue); 
     $(this).focus(); 
     return false; 
    } 
    var splittime = timeFieldValue.split(":"); 
    if(splittime[0] > 23 || splittime[1] > 59) { 
     alert('Please enter a valid time'); 
     return false; 
    }