fc2ブログ

jQueryでフォームを操作

ホームページをリニューアルしていて、入力フォームも凝ったものにしたくなった。
デザインの前に、まずはユーザーが入力しやすいようなUIプログラムを作ろうと思い、JQuery プラグインを探していると、 入力項目のチェックを行ってくれる「JQuery Validate」なるものがあった。必須項目や属性にMaxLengthなどチェックして、エラーがあれば項目の横に表示されます。
現サイトはエラー画面へ遷移やメッセージボックスが鬱陶しかったので、これは良いと思い実装したくなったのですが Dominoフォームにコーディングしている途中で、できないことに気が付いた。「JQuery Validate」は formタグに idを付けなければならないのだが、Dominoフォームは勝手に formタグを生成してしまうのだ。

諦めきれずにプラグインのソースを眺めていると多少知恵が付き、自前でプログラミングしてみました。
・ 入力項目にフォーカスがあった場合に下記のようにバックグランドに色が付く。
・ 必須エラーの場合、当該入力要素の横にメッセージを出す。
・ 不整メールアドレスの場合、当該入力要素の横にメッセージを出す。

下記が出来上がりフォーム。
ちなみに送信ボタンを押しても送信しないので、コメントは最下部のリンクからお願いします。

* 項目は必ずご記入願います。

名前 * :

ふりがな * :

住所 :

Eメール * :

ご質問 * :



ソースは下記の通り。
<script type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
<!--
$(function() {
// フォーカスされているフィールドの背景色を変更するイベントを追加
  $("input[type!=button], textarea, select")
    .addClass("idle")
    .focus(function() {
      $(this).addClass("active").removeClass("idle");
    }).blur(function() {
      $(this).removeClass("active").addClass("idle");
  });
// 送信ボタンのイベントを追加
  $("#check").click(function() {
    // エラー表示をクリアする
    $("input[type!=button], textarea, select").removeClass("err");
    $(".msg").remove();
    // 必須項目をチェックする
    $(".required").each(function() {
      if (!$(this).hasClass("err")) {
        if ($(this).val() == '') {
          $(this).addClass("err").after("<span class='msg'>必須項目です。</span>");
        }
      }
    });
// Eメールアドレスをチェックする
    $(".email").each(function() {
      if (!$(this).hasClass("err")) {
        if (!$(this).val().match(/^[A-Za-z0-9]+[\w-\.]+@[\w\.-]+\.\w{2,}$/)) {
          $(this).addClass("err").after("<span class='msg'>メールアドレスが正しくありません。</span>");
        }
      }
    });
  });
});

// -->
</script>
<style type="text/css">
/* 入力項目バックグランド */

.active { background-color: #ffffcc; }
.idle {  background-color: #ffffff; }
.err { background-color: #ffcccc; }

/* エラーメッセージ */
.msg { color:#ff0000; }
</style>
<p>* 項目は必ずご記入願います。</p>
<p>名前 * : <input class="required"></p>
<p>ふりがな * : <input class="required"></p>
<p>住所 : <input></p>
<p>Eメール * : <input class="required email"></p>
<p>ご質問 * : <textarea class="required"></textarea></p>
<input type="button" value="送信" id="check">

説明すると条件に合った要素を抜き出し、クラスの追加削除しているだけ。
今回、入力要素の後ろにメッセージを追加するために after メソッドを使用しています。入力エラーが解消された場合にメッセージを消すため、メッセージはクラス付としています。
htmlファイルは こちら から。
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

プロフィール

ピヨパパ

Author:ピヨパパ
静岡市のエンドユーザーSE。
最近はDominoの開発ばかりでうんざり。
是非気軽にコメントして下さい。

FC2カウンター
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる