Champ de formulaire HTML - Comment exiger un format d'entrée
Ce que je veux faire ici, c'est exiger que les numéros de téléphone soient entrés dans mon formulaire HTML en tant que (XXX) XXX-XXXX et que les numéros SS soient entrés en tant que XXX-XX-XXXX. C'est tout.
La seule raison pour laquelle je le fais est que les résultats de soumission de formulaire sont cohérents et faciles à exporter vers Excel.
On m'a dit d'utiliser Javascript pour faire cela, mais je ne suis peut-être pas assez avancé pour comprendre toutes les étapes à suivre.
Est-ce que quelqu'un peut me diriger dans la bonne direction en gardant à l'esprit que je suis débutant?
Wow merci beaucoup Ethan et @ suman-bogati! Je suis presque là maintenant! Le champ affiche maintenant une erreur indiquant d’utiliser le format correct 555-55-5555. C'est génial. Mais peu importe ce que j'entre dans ce champ, la fenêtre contextuelle persiste. J'ai essayé 555-55-5555 et aussi 555555555 et ni sont acceptés. Voici le code HTML pour ce champ:
<label>
Social Security Number:
<input id="ssn" required pattern="^d{3}-d{2}-d{4}$"
title="Expected pattern is ###-##-####" />
</label>
</div>
<script>$('form').on('submit', function(){
$(this).find('input[name="SocialSecurity"]').each(function(){
$(this).val() = $(this).val().replace(/-/g, '');
});
$(this).find('input[name="ssn"]').each(function(){
$(this).val() = $(this).val().replace(/-/g, '');
});
});</script>
<br />
Le moyen le plus simple de le faire consiste simplement à utiliser plusieurs champs:
<div>
Phone:
(<input type="text" name="phone-1" maxlength="3">)
<input type="text" name="phone-2" maxlength="3">-
<input type="text" name="phone-3" maxlength="4">
</div>
<div>
SSN:
<input type="text" name="ssn-1">-
<input type="text" name="ssn-2">-
<input type="text" name="ssn-3">
</div>
Bien que cette approche soit certainement facile, ce n’est pas génial. L'utilisateur doit appuyer sur la touche de tabulation ou cliquer sur chaque champ pour saisir les données, et rien (autre que le bon sens) ne les empêche de saisir des éléments autres que des chiffres.
J'ai toujours le sentiment qu'en matière de validation, moins vous pouvez interagir avec l'utilisateur, mieux c'est. Laissez-les entrer leur numéro de téléphone dans le format de leur choix, puis effacez-le et supprimez tout, sauf les chiffres. De cette façon, l'utilisateur peut entrer "5555551212" ou "(555) 555-1212", mais la base de données contiendra toujours "5555551212".
L’autre élément à prendre en compte est que HTML5 propose des types spécifiques à Nice pour les numéros de téléphone (mais pas les numéros de sécurité sociale). Un navigateur moderne prendra en charge toute la validation de la saisie et, mieux encore, les appareils mobiles afficheront le pavé numérique au lieu du pavé entier.
Etant donné cela, le meilleur moyen d’afficher votre formulaire est le suivant:
<div>
<label for="fieldPhone">Phone: </label>
<input type="tel" id="fieldPhone" placeholder="(555) 555-1212">
</div>
<div>
<label for="fieldSsn">SSN: </label>
<input type="text" id="fieldSsn" name="ssn" placeholder="555-55-5555" pattern="\d{3}-?\d{2}-?\d{4}">
</div>
Si l'utilisateur a un navigateur moderne, cela gérera le côté utilisateur de la validation d'entrée pour vous. Si ce n'est pas le cas, vous devrez utiliser une bibliothèque de validation ou polyfill. Il y a toute une liste de polyfill de validation de formulaire HTMl5 ici:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-web-forms
Il ne reste donc qu’à normaliser vos données lorsque vous les enregistrez dans la base de données.
L'endroit idéal pour faire cela serait le back-end; cela ne dit pas où va votre formulaire, alors peut-être que vous n'avez pas son mot à dire sur la façon dont les choses sont traitées à l'arrière. Donc, vous pouvez le faire au début à la place. Par exemple, en utilisant jQuery:
$('form').on('submit', function(){
$(this).find('input[type="tel"]').each(function(){
$(this).val() = $(this).val().replace(/[\s().+-]/g, '');
});
$(this).find('input[name="ssn"]').each(function(){
$(this).val() = $(this).val().replace(/-/g, '');
});
});
Ce n’est pas non plus une approche parfaite: si vous effectuez une validation dans cette fonction et que la validation échoue, l’utilisateur verra son entrée remplacée par les versions normalisées, ce qui peut être déconcertant.
La meilleure approche serait d’utiliser AJAX et .serialize; vous pouvez non seulement mieux contrôler l'interface utilisateur, mais également effectuer toutes les validations souhaitées. Mais c'est probablement un peu au-delà de ce que vous devez faire maintenant.
Notez que la validation par téléphone est la plus délicate. La validation de téléphone HTML5 est très permissive, permettant aux gens d’entrer des numéros de téléphone internationaux, qui peuvent avoir des formats assez compliqués. Même les Américains ont parfois des numéros de téléphone tels que "+1 (555) 555-1212", et vous avez alors 8 chiffres au lieu de 7. Si vous voulez vraiment les limiter à 7 chiffres, vous devrez ajouter votre propre validation personnalisée:
/^\(?\d{3}\)?[.\s-]?\d{3}[.\s-]\d{4}$/
Cela couvrira toutes les variantes courantes utilisées par les utilisateurs (points, espaces, tirets, parenthèses) et n'autorisera que les numéros de téléphone américains à 7 chiffres.
Voici un jsfiddle démontrant la validation et la normalisation HTML5:
J'espère que ça aide!
Utilisez ces modèles si vous voulez que deux modèles soient appariés comme indiqué dans la question.
//for (XXX)-XXX-XXXX
var pattern = /^\(\d{3}\)\-\d{3}\-\d{4}$/;
//for XXX-XXX-XXXX
var pattern2 = /^\d{3}\-\d{3}\-\d{4}$/;
use peut utiliser qc comme ceci:
<html>
<head>
</head>
<body>
<input type="text" id="ok">
<script>
document.getElementById("ok").onkeypress = function(e){
var keycodes = new Array(0,48,49,50,51,52,53,54,55,56,57);
var was = false;
for(x in keycodes){
if(keycodes[x] == e.charCode){
was = true;
break;
}
else{
was = false;
};
};
var val = this.value;
if(was === true){
switch(val.length){
case 3:
if(e.charCode !== 0){
this.value += "-";
}
break;
case 6:
if(e.charCode !== 0){
this.value += "-";
}
break;
default:
if(val.length > 10 && e.charCode !== 0){return false;};
break;
};
val += e.charCode;
}
else{
return false;
};
};
</script>
</body>
Je l'ai testé en ff
Voici une solution complète utilisant le validateur jquery et jquery tools: Le motif regex qui gérera les deux cas est le suivant:
^ (\ d {3} - | (\ d {3})\s)\d {2} -\d {4} $
HTML:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script>
<link href="http://jquerytools.org/media/css/validator/form.css" type="text/css" rel="stylesheet">
<script>
$(function() {
$("#myform").validator();
});
</script>
</head>
<body>
<form id="myform">
<input type="text" name="name" pattern="^(\d{3}-|\(\d{3}\)\s)\d{2}-\d{4}$" maxlength="30" />
<br>
<input type="submit" name="submit" value="submit" />
</form>
</body>