HTML Champ de Formulaire - Comment exiger un format d'entrée

Ce que je veux faire ici, c'est d'exiger que les numéros de téléphone d'être entré dans mon formulaire HTML comme (XXX) XXX-XXXX et que les SS de la saisie des Numéros XXX-XX-XXXX. Thats it.

La seule raison pour laquelle je fais cela est de sorte que la forme de présentation des résultats sont cohérents et faciles d'exportation vers Excel.

On m'a dit d'utiliser du Javascript pour faire cela, mais peut-être que je ne suis pas assez avancé pour comprendre toutes les étapes.

Quelqu'un peut-il svp me pointer dans la bonne direction, ici, en gardant à l'esprit que je suis un débutant?

Wow merci beaucoup Ethan et @suman-bogati! Je suis PRESQUE là maintenant! Le champ de pop un message d'erreur indiquant d'utiliser le bon format de 555-55-5555. C'est génial. Mais peu importe ce que je entrer dans entrer dans ce champ le popup persiste. J'ai essayé 555-55-5555 et aussi 555555555 et ne sont ni acceptées. Voici le code HTML pour que le 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 />
En HTML5, un apport d'éléments peuvent avoir un pattern attribut spécifie le format. D'autre part, vous ne devriez jamais faire confiance validation côté client, comme il est facilement contournée, vous avez toujours de valider le format du côté du serveur.
donc, vous voulez deux modèles doivent être appariés (XXX) XXX-XXXX et (XXX) XXX-XXXX?
Susan qui est correct. La modification de la ligne <input name="SocialSecurity" size="9" pattern="(!^\d{3}-\d{2}-\d{4}$" style="width: 141px" type="text" /> Ne fait absolument rien.
De la convivialité point de vue, l'approche est tout faux. Vous devez vous demander: quels formats puis-je traiter de façon significative, et accepter au format que je veux, et comment puis-je aider les utilisateurs à utiliser certains de ces formats? Résoudre le mauvais problème n'est pas de même beaucoup plus facile que de résoudre le problème en question.

OriginalL'auteur JefeTheTechy | 2014-02-08

  1. 11

    La façon la plus simple de le faire est simplement à l'aide de 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 est certainement facile, ce n'est pas grand. L'utilisateur doit appuyer sur la touche tab ou cliquez sur chaque champ pour entrer les données, et il n'y a rien (autre que le sens commun) de les empêcher d'entrer dans d'autres choses que de chiffres.

    J'ai toujours l'impression que, quand il s'agit de la validation, le moins que vous pouvez obtenir à l'utilisateur moyen, le meilleur. Leur permettre d'entrer leur numéro de téléphone dans le format qu'ils aiment, alors vous frotter, enlevant tout mais chiffres. De cette façon, l'utilisateur peut entrer "5555551212" ou "(555) 555-1212", mais la base de données seront toujours de "5555551212".

    L'autre chose à considérer est que le HTML5 propose quelques belles des types spécifiques pour les numéros de téléphone (mais pas SSNs). Un navigateur moderne prendra soin de tous la validation de l'entrée et, encore mieux, des appareils mobiles, afficher le pavé numérique de l'ensemble du clavier.

    Donné que le meilleur moyen d'afficher votre formulaire est: est-ce

    <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 dispose d'un navigateur moderne, cela permettra de gérer l'utilisateur côté de l'entrée de validation pour vous. S'ils ne le font pas, vous devrez utiliser une validation de la bibliothèque ou de polyfill. Il ya toute une liste de HTMl5 de validation de formulaire polyfills ici:

    https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-web-forms

    Donc tout ce qui reste maintenant est de normaliser vos données lorsque vous l'enregistrez dans la base de données.

    L'endroit idéal pour le faire pourrait être la fin; il n'a pas dit où votre forme, et ce, bien que, peut-être que vous n'avez pas tout dire sur la façon dont les choses sont traitées sur le back-end. De sorte que vous pouvez le faire dans le front-end à la place. Par exemple, à l'aide de 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 une approche parfaite: si vous ne la validation de cette fonction, et la validation échoue, l'utilisateur verra son entrée remplacé par le normalisée versions, ce qui peut être déconcertant.

    La meilleure approche serait d'utiliser AJAX et .serialize; non seulement vous pouvez avoir un meilleur contrôle sur l'INTERFACE utilisateur, mais vous pouvez faire tout de validation que vous souhaitez. Mais c'est sans doute un peu au-delà de ce que vous devez faire maintenant.

    Noter que la validation téléphonique est la plus délicate. Le HTML5 téléphone de validation est très permissive, permettant à des personnes d'entrer les numéros de téléphone internationaux, ce qui peut avoir assez compliqué formats. Même les gens dans les etats-unis vont parfois entrer un numéro de téléphone comme "+1 (555) 555-1212", et puis vous avez des 8 chiffres au lieu de 7. Si vous voulez vraiment les limiter à 7 chiffres, vous devez ajouter votre propre validation:

    /^\(?\d{3}\)?[.\s-]?\d{3}[.\s-]\d{4}$/

    Cela permettra de couvrir toutes les variations courantes des gens utilisent (temps, espaces, tirets, parenthèses), et permettent encore à seulement 7 chiffres des numéros de téléphone aux usa.

    Voici un jsfiddle démontrant la validation HTML5 et normalisation:

    http://jsfiddle.net/Cj7UG/1/

    J'espère que cela aide!

    Je vous remercie. Qui fonctionne, mais maintenant je reçois "veuillez entrer le format correct" n'importe quel format je entrée dans le champ.
    Il y avait une faute de frappe dans mon SSN modèle (j'ai été à l'aide de trois chiffres pour le dernier bit au lieu de quatre). J'ai corrigé et ajouté un jsfiddle démontrant tout cela fonctionne: jsfiddle.net/Cj7UG/1

    OriginalL'auteur Ethan Brown

  2. 1

    Utiliser ce motif si vous voulez deux modèles doivent être mis en correspondance comme demandé 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}$/;

    DÉMO

    OriginalL'auteur Suman Bogati

  3. 0

    Ici est une solution complète à l'aide de jquery et jquery outils validator:
    regex modèle qui permettrait de gérer les deux cas est :

    ^(\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>

    Cliquez ici pour la démo sur jsfiddle

    OriginalL'auteur Goran.it

  4. 0

    utiliser pouvez utiliser qqch 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

    OriginalL'auteur scripter