web-dev-qa-db-ja.com

HTMLフォームフィールド-入力フォーマットを要求する方法

ここでやりたいのは、電話番号を（XXX）XXX-XXXXとしてHTMLフォームに入力し、SS番号をXXX-XX-XXXXとして入力することです。それでおしまい。

私がこれを行っている唯一の理由は、フォームの送信結果が一貫していて、Excelに簡単にエクスポートできるようにするためです。

私はこれを行うためにJavascriptを使用するように言われましたが、おそらく私はそれを行うためのすべてのステップを理解するのに十分に進んでいません。

私が初心者であることを念頭に置いて、誰かが私をここで正しい方向に向けることができますか？

イーサンと@ suman-bogatiに感謝します！私は今ほとんどそこにいます！このフィールドには、555-55-5555の正しい形式を使用することを示すエラーが表示されるようになりました。それは素晴らしいことです。しかし、私がそのフィールドに何を入力しても、ポップアップは持続します。 555-55-5555と555555555を試しましたが、どちらも受け入れられません。そのフィールドのHTMLは次のとおりです。

<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 />
javascripthtmlformsfieldmasking
4
JefeTheTechy

これを行う最も簡単な方法は、複数のフィールドを使用することです。

<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>

このアプローチは確かに簡単ですが、それは素晴らしいことではありません。ユーザーはタブを押すか、各フィールドをクリックしてデータを入力する必要があり、数字以外の入力を妨げるものは（常識以外に）ありません。

検証に関しては、ユーザーの邪魔にならないほど良いといつも感じています。電話番号を好きな形式で入力してもらい、それをスクラブして数字以外のすべてを削除します。このようにして、ユーザーは「5555551212」または「（555）555-1212」と入力できますが、データベースは常に「5555551212」を保持します。

考慮すべきもう1つの点は、HTML5が電話番号にいくつかのNice固有のタイプを提供していることです（SSNは提供していません）。最新のブラウザはすべての入力検証を処理し、さらに良いことに、モバイルデバイスはキーパッド全体ではなくテンキーを表示します。

それを考えると、フォームを表示するためのbest方法は次のとおりです。

<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>

ユーザーが最新のブラウザーを使用している場合、これにより入力検証のユーザー側が処理されます。そうでない場合は、検証ライブラリまたはポリフィルを使用する必要があります。ここにHTMl5フォーム検証ポリフィルの全リストがあります：

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

したがって、残っているのは、データベースに保存するときにデータを正規化することだけです。

そのための理想的な場所はバックエンドです。ただし、フォームがどこに行くのかはわかりません。そのため、バックエンドでの処理方法については何も言えないかもしれません。したがって、代わりにフロントエンドでこれを行うことができます。たとえば、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, '');
    });
});

これも完全なアプローチではありません。この関数で検証を行い、検証が失敗した場合、ユーザーは自分の入力が正規化されたバージョンに置き換えられるのを見ることになり、混乱を招く可能性があります。

最善のアプローチは、AJAXおよび.serialize;を使用することです。UIをより適切に制御できるだけでなく、必要なすべての検証を実行できます。しかし、それはおそらく少しです。あなたが今する必要があることを超えて。

電話による検証が最も難しいことに注意してください。 HTML5電話の検証は非常に寛容であり、非常に複雑な形式の国際電話番号を入力できます。米国の人でも「+1（555）555-1212」のような電話番号を入力すると、7桁ではなく8桁になることがあります。本当に7桁に制限したい場合は、次の番号を追加する必要があります。独自のカスタム検証：

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

これは、人々が使用するすべての一般的なバリエーション（ピリオド、スペース、ダッシュ、括弧）をカバーし、7桁の米国の電話番号のみを許可します。

HTML5の検証と正規化を示すjsfiddleは次のとおりです。

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

これがお役に立てば幸いです。

11
Ethan Brown

問題の質問どおりに2つのパターンを一致させる必要がある場合は、このパターンを使用します。

//for (XXX)-XXX-XXXX
var pattern =  /^\(\d{3}\)\-\d{3}\-\d{4}$/; 

//for XXX-XXX-XXXX
var pattern2 = /^\d{3}\-\d{3}\-\d{4}$/;

[〜＃〜]デモ[〜＃〜]

1
Suman Bogati

useは次のようにsthを使用できます：

<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>

私はffでそれをテストしました

0
scripter

Jqueryおよびjqueryツールバリデーターを使用した完全なソリューションは次のとおりです。両方のケースを処理する正規表現パターンは次のとおりです。

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

---（jsfiddleのデモはここをクリック

0
Goran.it