QA@IT

フォームのバリデーションに関して

2857 PV

お世話になります。

最近よく見かける、フォームに何か入力すると、その場でバリデーションチェックをしてくれたり
するものって、どうやって作られているのでしょうか??

javascriptで作られてるだろうということは推測できるのですが、それ以外の推測が。。。

よろしくお願いいたします

  • たとえばkeyupイベントでテキストボックスに入力してる日付の正当性チェックしているというのはそれほど不思議ではないですよね?どういう項目のチェックが珍しく感じるか、具体的なものはありますか? -
  • このサイトと同じ事をしたいです
    http://efo.comix.co.jp/sample.html

    これの仕組みがちょっとよくわからなくて、、、質問してみた次第です。
    -

回答

基本的にはkeyupやblurでチェックをしているだけだと思います。
郵便番号なんかは入力に応じてバックグラウンドで取りに行っているかもしれません。

ちょっとどの程度わからないのかが不明なのですが、似たような処理を適当に書いてみました。
いろいろと適当なつくりですが参考までにどうぞ。
なお提示のサイトが実際にどうやってるかは見ていません。

http://jsfiddle.net/fliedonion/KhfbG/

内容的には、単体だと以下の様なチェックを気持ちだけ汎用化してある感じです。

$(".emal").blur(function(){
        if(!$(this).val().match(/[a-z.-]+[a-z-]@([a-z-]+\.){1,}[a-z]{2,}/)){
            $("#email_validate")
              .css("background-color","#ffaaaa")
              .text("不正なemailアドレスです")
              .css("display","inline");
        }else{
            $("#_validate").css("display","none");
        }
};
編集 履歴 (0)
  • おお、ありがとうございます! -
ウォッチ

この質問への回答やコメントをメールでお知らせします。