web-dev-qa-db-fra.com

Comment valider avec Javascript un texte de saisie avec heures et minutes

Je dois créer un formulaire HTML avec un champ de saisie de texte pour Heures et minutes.
Quelque chose comme:

Nom: [Foo]
Nom de famille: [Bar]
Tâche: [Spam]
Heures Minutes: [00:15] <- Texte saisi.

Comment puis-je aider/valider/forcer l'utilisateur à compiler les valeurs Heures et Minutes au seul format autorisé HH: mm en utilisant Javascript? *

Plage de temps valide: de 00:00 à 23:59

* Je ne peux pas utiliser Jquery et bien sûr je vérifierai deux fois la valeur soumise côté serveur

javascriptvalidation
18
systempuntoout

Soit avec l'expression régulière suivante: 

^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$

Ou à la main, mais je suggère fortement le RegExp:) Un exemple simple 

<SCRIPT TYPE="text/JavaScript">
    function validateHhMm(inputField) {
        var isValid = /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/.test(inputField.value);

        if (isValid) {
            inputField.style.backgroundColor = '#bfa';
        } else {
            inputField.style.backgroundColor = '#fba';
        }

        return isValid;
    }
</SCRIPT>
<FORM METHOD="POST">
    <input type="text" onchange="validateHhMm(this);" />
</FORM>
43
dominicbri7

La RegExp de la première réponse ne correspond pas correctement à la requête du PO.

^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$

Devrait être

^([0-1][0-9]|2[0-3]):([0-5][0-9])$

Matchs 00-19 ou 20-23: 00-59

OP a demandé la validation de HH: MM dans la plage 00:00 - 23:59

Pas de secondes. 24h00 ne devrait pas être valide. Deux chiffres pour l'entrée de l'heure et des minutes.

15
TRT 1968
<HTML>
<Head>
<script language="javascript">
function validateTime(obj)
{
    var timeValue = obj.value;
    if(timeValue == "" || timeValue.indexOf(":")<0)
    {
        alert("Invalid Time format");
        return false;
    }
    else
    {
        var sHours = timeValue.split(':')[0];
        var sMinutes = timeValue.split(':')[1];

        if(sHours == "" || isNaN(sHours) || parseInt(sHours)>23)
        {
            alert("Invalid Time format");
            return false;
        }
        else if(parseInt(sHours) == 0)
            sHours = "00";
        else if (sHours <10)
            sHours = "0"+sHours;

        if(sMinutes == "" || isNaN(sMinutes) || parseInt(sMinutes)>59)
        {
            alert("Invalid Time format");
            return false;
        }
        else if(parseInt(sMinutes) == 0)
            sMinutes = "00";
        else if (sMinutes <10)
            sMinutes = "0"+sMinutes;    

        obj.value = sHours + ":" + sMinutes;        
    }

    return true;    
}


</script>
</Head>
<Body>
<input type="text" onblur="validateTime(this)">
</Body>
</HTML>
6
Mouadh

Que diriez-vous

function validTime(inputStr) {
    if (!inputStr || inputStr.length<1) {return false;}
    var time = inputStr.split(':');
    return time.length === 2 
           && parseInt(time[0],10)>=0 
           && parseInt(time[0],10)<=23 
           && parseInt(time[1],10)>=0 
           && parseInt(time[1],10)<=59;
}
1
KooiInc

ce n'est peut-être pas le meilleur mais ça marche pour moi. Je retourne faux s'il n'y a pas d'erreur dans ce cas. vérifie à la fois le format et les valeurs.

if (value.substr(2,1) === ':') {
    if (!value.match(/^\d\d:\d\d/)) {
        return "Invalid Format";
    }
    else if (parseInt(value.substr(0,2)) >= 24 || parseInt(value.substr(3,2)) >= 60)  {
        return "Invalid Format";
    }
    else {
        return false;
    }

}
else {
    return "Invalid Format";
}
0
Lomi Faith

Vous pouvez utiliser quelque chose comme jQuery.maskedit

0
VeroLom