コメントフォームをバリデートするexValidationをつかってみた

exvalidation

日本語向きだし、HTMLを汚さないとっても素敵なバリデートプラグインexValidationをつかってみました。

ダウンロードと詳しい使い方は作者さんのサイトでお願いします。

どんなフォームにも使えるjQueryのフォームバリデーションexValidation | 5509

ここでは自分が使ってみた覚書みたいなものを書いておくので、詳しく知りたい!っていう方はスルーの方向で。

js, cssファイルを読み込む

head要素内に必要なファイルを読み込みます。

<link type="text/css" rel="stylesheet" href="css/exvalidation.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/exvalidation.js"></script>
<script type="text/javascript" src="js/exchecker-ja.js"></script>

バリデーションルールを設定する

次のような値をフォーム要素のclass属性に設定する方法と、script要素内にプロパティを指定する方法がありますが、できるだけHTMLに書きたくないので後者を採用しました(後述)。

  • required – 必須項目
  • select – select要素用の必須項目
  • radio – radioボタン
  • checkbox – checkbox
  • group – 複数の項目をまとめる場合
  • retype-対象にするID – 再入力チェック
  • email – メールアドレスチェック(*@*.*)
  • hankaku – 全角禁止
  • zenkaku – 全角のみ
  • hiragana – ひらがなのみ
  • katakana – カタカナのみ
  • furigana – ふりがな(ひらがな、数字、アルファベット、〜、ー、())
  • tel – 電話番号(形式チェックはなし)
  • numonly – 数字のみ
  • nocaps – 英数字(小文字)のみ
  • zip – 郵便番号(形式チェックはなし)
  • url – URL(http(s)://)
  • minX – X文字以下
  • maxX – X文字以上

コードを書く場所はhead要素内でも、別にしたjsファイルでも好きな方で。

テストに使ったフォームは次のようなブログのコメント欄を想定したシンプルなものです。

<dl>

  <dt><label for="name">名前</label></dt>
  <dd><input type="text" id="name" name="name" value="" /></dd>

  <dt><label for="mail">メールアドレス</label></dt>
  <dd><input type="text" id="mail" name="mail" value="" /></dd>

  <dt><label for="url">URL</label></dt>
  <dd><input type="text" id="url" name="url" value="" /></dd>

  <dt><label for="comment">コメント</label></dt>
  <dd><textarea name="comment" id="comment" rows="5" value=""></textarea></dd>

</dl>

このフォームのバリデーションルールを次のようにしたいとします

  • 名前とコメントは必須項目
  • メールアドレスは形式があってるかチェック
  • URLも形式のチェック
  • エラーがあるとき、エラーの場所までスクロールしない
  • 複数個のエラーがあるときにひとつずつ処理する

そのときの書き方は次のようになります。

$(function(){

  $("form").exValidation({

    rules: {
      name: "chkrequired",
      mail: "chkemail chkhankaku",
      url: "chkurl",
      comment: "chkrequired",
    },

    stepValidation: true,

    scrollToErr: false

  });

});

そのほかの詳しい内容は作者さんページで!

どんなフォームにも使えるjQueryのフォームバリデーションexValidation | 5509

  • Nori@渋の谷のエンジニア

    rulesのところの書き方間違ってますよ。

    $(function(){

    $(“form”).exValidation({

    rules: {

    name: “chkrequired”,

    mail: “chkemail chkhankaku”,

    url: “chkurl”,

    comment: “chkrequired”,

    },

    stepValidation: true,

    scrollToErr: false

    });

    });

    • http://scianto.net/ そう

      ありがとうございます。修正しておきました♪

そうのひとりごと

© 2017 PAOLOG