TD: input

Affichage des articles dont le libellé est input. Afficher tous les articles

Evenements sur des inputs : have fun

Entrez successivement quatre entrées différentes !

Email
email de confirmation

Cette exemple montre que nous pouvons développer nos propres événements sur les inputs.

Amusons nous en créant des massages délirant lorsque l'utilisateur ne tape pas le même adresse !

var messages=["Verifiez vos adresses. Merci.",
" Soyez attentif, merci",
"Vous commencez à me fatiguer",
"Bravo, j'abandonne !"]

1) recupération de l'input

var mailC = document.getElementById('mailC');

2) mise en place de l'écouteur

mailC.addEventListener('change', checkPasswordValidity, false);

3) définition du gestionnaire

var checkPasswordValidity = function() {
if (mail.value != mailC.value) {

compteur=++compteur%4;
mailC.setCustomValidity(messages[compteur]);

} else {
mailC.setCustomValidity('');
}
};

les patterns utiles : verification d'un mot de passe.

Vérification par les patterns

2ab : (* = 0 ; d = 2)
a2b : (* = 1)
ab2 : (* = 2)
abc : (erreur)

2ab : (* = 1)
a2b : (* = 0)
ab2 : (* = 0)
222 : (erreur)

Nous pourrons écrire pattern="^(?=.*[a-z])(?=.*[\d]).*$" pour vérifier les conditions au moins un caractère et un nombre.

^                   # Start of string
(?=                 # groupe
 .*[a-z]            #  au - 1 lettre qq part
)                   #  
(?=                 # groupe
  .*[\d])           #  au - un chiffre qq part
.*                  # 
$                   # End of string

(?=.{8,}) : au - 8 Entrées
(?=.*[A-Z]) : au - 1 Majuscule
(?=.*[\W]) : au - 1 Caractère Spécial/li>

Découvrez une liste de patterns : https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation

input : pattern

Comprendre la différence entre pattern= (?: ) et pattern= (?= )

JS Bin

rappels :
http://duponttd.blogspot.fr/2014/10/decouvrez-les-nouveaux-types-dinput.html

Récupérer la valeur d'un input : valueAsNumber

La valeur récupérée d'un input est un string ; il est avantageux d'utiliser valueAsNumber.

if(!!input[i].valueAsNumber) {
itemQty =input[i].valueAsNumber || 0;
} else {
itemQty =parseFloat(input[i].value) || 0;
}

Code en action

La balise output existe aussi !

Pour en savoir plus sur la balise <output>
Exemple plus complexe :

Order Details

Product Code	Description	Price	Total
COMP001	The Ultimate book	$100	$0
COMP002	The Ultimate Netbook	$299	$0
Order Total			$0.00

JS Bin

input : message perso !

Afficher un message en fonction des entrées exemple de code

Découvrez les nouveaux types d'input

Input Types

type="color" value:

type="date" value:

type="email" value:

type="number" value:

type="range" value:

type="time" value:

type="url" value:

datalist value:

remarque : Autre code pour modifier les valeurs