もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第11回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(3)

この記事を読むのに必要な時間:およそ 13 分

アルファベットのみのバリデーション

数値のみのバリデーションの次は,アルファベットのみの入力をチェックする実装例をご紹介いします。

アルファベットのみの入力かどうかのチェック

jQuery(function($){
  $('#alphabet').bind('keyup blur',function(){
    var self = $(this);
    var txt = self.val();
    var txtLength = txt.length;

    if(txt && txtLength>0){
      if(txt.match(/^[a-zA-Z]*$/)){
        self.next().remove().end().after('<span class="ok">valid</span>');
      }else{
        self.next().remove().end().after('<span class="err">半角英字で入力してください</span>');
      }
    }else{
      $(this).next().remove();
    }
  });
});

入力が半角のアルファベッドではなければ,⁠半角英字で入力してください」の表示がでるサンプルです。数値だけのマッチングと正規表現部分が違うだけです。

半角英字のみの入力かどうか

txt.match(/^[a-zA-Z]*$/)

^[a-zA-Z]*$

パターン(赤文字部分)説明
^~で始まる
[a-zA-Z]*半角英字(半角小文字a~zと半角大文字A~Z)が繰り返される
$~で終わる

数字の入力を許可せずにアルファベットのみの入力にする機会がそれほど多くはないかもしれないですが,そのような時のための参考にしてみてください。

URLのバリデーション

さて,数字のみや,アルファベットのほかに,フォームで利用されそうなバリデーションとしてもう一つ,URLのチェック実装例をご紹介します。

正しいURLの入力かどうかのチェック

jQuery(function($){
  $('#url').bind('keyup blur',function(){
    var self = $(this);
    var txt = self.val();
    var txtLength = txt.length;

    
    if(txt && txtLength>0){
      if(txt.match(/^https?\:\/\/\S+\.\w+/)){
        self.next().remove().end().after('<span class="ok">valid</span>');
      }else{
        self.next().remove().end().after('<span class="err">正しいURLを入力してください</span>');
      }
    }else{
      $(this).next().remove();
    }
  });
});

入力で正しいURLの表記になるまで「正しいURLを入力してください」の表示がでるサンプルです。http://○○.○○~/もしくはhttps://○○.○○~の形をとるまでエラーが表示されます。

正しいURLの入力かどうか

txt.match(/^https?\:\/\/\S+\.\w+/)

^https?\:\/\/\S+\.\w+

パターン(赤文字部分)説明
^~で始まる
?httpもしくはhttps
\:\/\/コロンやスラッシュのエスケープ
\S+空白や改行など以外の文字の繰り返し
\.ドットのエスケープ
\w+英数字の繰り返し

途中で「\S+」を使い,空白や改行など以外が連続されるようにしてみました。その部分も「\w+」と英数字の繰り返しにする方法もあるかもしれませんが,その方法では,日本語ドメインが許可されなくなってしまいます。なのでそこは「\S+」を利用しています。

URLの最初のドット位置の右隣までしかチェックされないことにはなりますが,あくまでここはhttp://ではじまるか,https://と,正しいUSLの入力かどうかのチェックをするだけです。

必須項目のバリデーション

さて,今回の最後に,正規表現を使う例ではないですが,入力必須箇所が入力されているかどうかのチェックを行い,入力が無ければエラーがでる実装例をご紹介します。

HTML

<form>
<dl>
<dt>名前<span class="required">[必須]</span></dt>
<dd><input type="text" id="name" value="" class="required" /></dd>
</dl>
<dl>
<dt>性別<span class="required">[必須]</span></dt>
<dd class="inline checkRequired">
<input type="radio" value="man" id="man" name="gender" /><label for="man">男性</label>
<input type="radio" value="woman" id="woman" name="gender" /><label for="woman">女性</label>
</dd>
</dl>
<dl>
<dt>趣味<span class="required">[必須]</span></dt>
<dd class="inline checkRequired">
<input type="checkbox" name="hobby" id="internet" value="インターネット" class="required" /><label for="internet">インターネット</label>
<input type="checkbox" name="hobby" id="movie" value="映画" /><label for="movie">映画</label>
<input type="checkbox" name="hobby" id="books" value="読書" /><label for="books">読書</label>
</dd>
</dl>
<p><input type="submit" value="送信" /></p>
</form>

上記HTMLはあくまでサンプル用です。サンプル用なので,項目は少なくなっています。

入力必須項目が入力されているかチェック

jQuery(function($){
  $('#name').bind('keyup blur',function(){
    var self = $(this);
    var txt = self.val();
    var txtLength = txt.length;
    
    if(txt && txtLength>0){
      if(txt.match(/^\s/)){
        self.next().remove().end().after('<span class="err">最初に空白は入力できません。</span>');
      }else{
        self.next().remove().end().after('<span class="ok">valid</span>');
      }
    }else{
      self.next().remove().end().after('<span class="err">入力必須項目です。</span>');
    }
  });
  
  $(".checkRequired").bind('keyup blur click',function(){
    var self = $(this);
    if($(":checked",this).length > 0){
      self.children().filter('.err').remove();
    }else{
      self.children().filter('.err').remove();
      self.append('<span class="err">入力必須項目です。</span>');
    }
  });
  
  $('form').submit(function(){
    $('.err').remove();
    $("input.required").each(function(){
      var self = $(this);
      if(self.val()==""){
        self.next().remove().end().after('<span class="err">入力必須項目です。</span>');
      }
    });
    $(".checkRequired").each(function(){
      var self = $(this);
      if($(":checked",this).length == 0){
        self.append('<span class="err">入力必須項目です。</span>');
      }
    });
    return false;
  });
});

チェックするタイミングは,各項目の入力やチェック時と,submit(サンプル上の送信)を押した時です。

テキストボックスの入力判定は「.val()==""」で判定しています。一方ラジオボタンやチェックボックスは,チェックが入っているものを「:checked」「.length」でチェックが入っているものの数をチェックしていて,0個ならエラーと判定されるようになっています。

今回の例ではラジオボタンやチェックボックスの親ボックスに「.checkRequired」を指定することでチェックされるようになっています。

今回の各サンプルは,それぞれコードが長くなっているため,難しく感じるところも多々あると思います。コードが分からないときは,コードの部分部分をそれぞれの一つ一つをチェックしてみたりしてください。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/