2008 08.22

リアルタイムフォームバリデーション jQuery.validation.js

validation.jsサンプル

jQuery.validation.jsはフォーム入力のイライラをなくして
Webブラウジングとかショッピングをもっと快適にするためのjQueryプラグインです。
(もちろんサーバサイドでのチェックは必須ですが…)

jQuery.validation.jsのサンプルを見てみる

トピックス

特徴

フォームバリデーションのライブラリはたくさん存在しますが
jQuery.validation.jsの特徴として

  • リアルタイムでエラーを表示することで間違いを少なくする
  • クリーンなHTMLで使える
  • フォームのデザイン(HTMLの構成)に依存しない
  • エラーチップのデザイン・位置を変更できる
  • エラー文、ダイアログに表示する文章を変更できる
  • 複数のフォームがある場合 フォーム毎に設定を変更できる
  • ダイアログと透明レイヤーの透過度を変更できる
  • AjaxZip2.0と併用できる

などがあります。(詳細は導入方法・拡張に記述。)

ダウンロード

jQuery.validation.jsはjQueryのプラグインなので
jQuery1.2.6が必要になります。(サンプルファイルには含まれています。)

ソース単体
jQuery.validation.js(11.1KB)
jQuery.validation.min.js(6.75KB)
サンプルファイル(AjaxZip2無し)
validation_light.zip(36KB)
サンプルファイル(AjaxZip2.0同梱)
validation.zip(1,593KB)

導入方法

1.JSファイルを読み込む


<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.validation.js"></script>

2.input要素にクラスを割り振る(checkbox、radio、複数項目以外)

HTMLファイルのinput要素に以下のクラスを割り振ることで
適用する項目を決めることができます。

  • required - 必須項目
  • retype-対象にするID - 再入力チェック
  • email - メールアドレスチェック (*081114 mail から email に変わりました
  • hankaku - 全角禁止
  • tel - 電話番号(形式チェックはなし)
  • numonly - 数字のみ
  • zip - 郵便番号(形式チェックはなし)

また、適用させる項目はrequiredとhankakuは他の項目と同時に含めることが出来ます。
例えば下記のようにクラスにemail, hankaku, requiredを指定した場合は


<input type="text" name="mail" id="mail" value="" class="email hankaku required" />

必須項目・メールアドレスチェック・全角禁止になります。
またクラスに記述する順序は任意で構いません。
ところでjQuery.validation.jsを導入する場合、input要素には固有のidが必須になります。
またvalue属性も必須になります。

特殊なタイプのチェック形式は以下のようになります。カッコ内はあってもなくても可

メールアドレス：*@*.*
電話番号：*(-)*(-)*
郵便番号：***(-)****

電話番号…微妙なんですよね…

3.checkbox、radio、複数項目の場合

checkbox、radio、複数項目をチェックする場合は
spanなどのインライン要素(*1)でグループを明示した上で
ここではspan要素としますが span要素にid、classを割り当てます。

  • group - 複数項目のチェック
  • check - checkbox ひとつ以上が選択されるとクリア
  • radio - radio いずれかが選択されるとクリア

例えば、メールアドレスを@前と後で分ける場合は


<input type="text" name="mail2" id="mail2" value="" class="" />
@
<input type="text" name="mai3" id="mail3" value="" class="" />

といったように分けるのが一般的なので
これをチェックする場合は以下のようになります。


<span class="group required hankaku email" id="groupmail"><input type="text" name="mail3" id="mail3" value="" class="" />
@
<input type="text" name="mail2" id="mail2" value="" class="" /></span>

ポイントは上にも記述していますが、
複数のinput要素をまとめるspanを用意してそのspan要素にid、classを割り当てます。

classはgroupが必須になり、あとはinput単体で指定するものが使えます。
なので今回の場合はclassには group, required, hankaku, email が入ることになります。

以下はradioボタンの例です。


<ul class="radio" id="radioarray">
  <li><label for="radio1"><input type="radio" name="radio" id="radio1" value="" /> 男</label></li>
  <li><label for="radio2"><input type="radio" name="radio" id="radio2" value="" /> 女</label></li>
</ul>

radio、checkboxは例外になり
必須項目としてしかチェック出来ないのでclassにrequiredは必要ありません。

上記の例ではグループ化がspan要素ではなくul要素になっていますが
CSSでinline指定(*1)すれば大丈夫です。
要はdisplayプロパティがinline(inline-blockでも可)であればなんでも大丈夫です。

*1) 幅を持たせたブロック要素でも可
ブロック要素は幅初期値が親に対して100%になるので エラーチップが画面から見切れます。

4.select要素を対象にする場合

select要素を対象にする場合は


<select name="sex" id="sex" class="required">
  <option value="" selected="selected">選択してください</option>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

のようにvalueが空のoption要素を含めます。value属性を指定しないとvalidationは行われません。
初期値には必ず空のvalue属性を指定してください。(初期値にはselected属性を指定することが推奨されています)
select要素は選択されているoptionが変わった場合にvalidationが行われます。

5.再入力をチェックする場合

メールアドレスやパスワードなど
再入力を促す項目がある場合、それもvalidationの対象にすることができます。
たとえば、


<input type="text" id="mail" name="mail" value="" class="email hankaku required" />

の後に


<input type="text" id="remail" name="remail" value="" class="" />

といった再入力項目があるとします。
この項目は先のメールアドレス入力項目 input#mail と同じものを入力してもらうので


<input type="text" id="remail" name="remail" value="" class="retype-mail required" />

のようにクラスに retype-対象にする項目のID を含めます。
今回は対象にする項目(メールアドレス入力項目)のIDはmailとなっているので retype-mail としています。

再入力チェックは複数項目の場合も有効で、
単純に3と組み合わせるだけです。


<span class="group required hankaku email" id="groupmail"><input type="text" name="mail2" id="mail2" value="" class="" />
@
<input type="text" name="mail3" id="mail3" value="" class="" /></span>

の再入力項目は


<span class="group required retype-groupmail" id="regroupmail"><input type="text" name="remail2" id="remail3" value="" class="" />
@
<input type="text" name="remail3" id="remail3" value="" class="" /></span>

となります。

6.入力文字数をチェックする場合

パスワードなどの項目に入力文字数の制限をかけたいときは


<input type="password" id="pass" name="pass" value="" class="required min6 max12" />

のようにclassに

  • minX
  • maxX (Xはともに任意の数字)

を含ませます。もちろんmin・maxどちらか一方だけを指定でき、
また他のすべてのチェックと併用することができます。
ただし複数項目のメールアドレスは 文字列に@を含めるので1文字多く数えられます。
(メールアドレスに入力文字数制限を使うことはないと思うのでそのままにしてます。)

7.アクティベート

最後に任意のJSファイルで以下のように実行します。


$(function(){
  $(".validate").validation();
});

対象にするform要素は


$("対象にするform要素").validation();

で決定します。
form要素全てに適用する場合は


$("form").validation();

classに”validation”を含むform要素全てに適用する場合は


$(".validation").validation();

idに”validation”を含むform要素のみに適用する場合は


$("#validation").validation();

となります。

拡張

特徴でも記述したようにjQuery.validation.jsはなるべく汎用性を持たせるために
さまざまな拡張プロパティがあります。

表示メッセージを変更する場合

たとえば、必須項目とメールアドレスチェックの文章を変えたいときは


$(".validate").validation({
  msgs: {
    required: "This field is required",
    mail: "Enter the valid E-mail address"
  }
});

とします。
msgsが持つプロパティの初期値は

  • required: “必須項目です”
  • retype: “直前の項目と同じ内容を入力してください”
  • email: “正しいEメールアドレスを入力してください” (*081114 mail から email に変わりました
  • hankaku: “全角文字は使えません”
  • tel: “数字と’-'(ハイフン)以外は使えません”
  • numonly: “数字のみで入力してください”
  • zip: “正しい郵便番号を入力してください”
  • check: “ひとつ以上を選択してください”
  • radio: “いずれかを選択してください”
  • min: “文字以上で入力してください”
  • max: “文字以内で入力してください”
  • submit: “必須項目を正しく入力してください”

です。実際に記述するときは順不同で構いません。
このうちrequiredからzipはエラーチップに表示される文章で
submitのみダイアログに表示される文章となっています。
これらのプロパティに含まれる文章にはHTMLタグを使うことが出来ます。

サンプルではダイアログのメッセージ(msgs.submit)に


$(".validate").validation({
  msgs: {
    submit: "入力が完了していない<strong>必須項目</strong>があります。<br /><strong>必須項目は全て入力</strong>してください。"
  }
});

といったようにstrongタグと改行を含ませています。

チップの位置を変更する

チップは各input要素を基準にして表示位置が決定されます。
初期設定でチップはinput要素の右に表示されるようになっていますが
初期位置を

  • 上: “top”
  • 右: “right”
  • 下: “bottom”

から選択することができ、初期値からの位置を細かく指定することができます。
例えば、チップをinput要素の下、さらに10px下方へ配置する場合は以下のようにします。


$(".validate").validation({
  extension: {
    position: "bottom",
    top: 10,("10px")
    left: 0
  }
});

ここで注意するのは、inputの幅と高さはpaddingとborderを含まない点です。


input {
  border: solid #DFDFDF 3px;
  padding: 3px;
  width: 200px;
  height: 20px;
}

といった指定がされている場合、チップはinput要素に12px分重なることになります。
チップ位置の初期値はそれぞれ

  • position: “right”
  • top: 0
  • left: 15(px)

になります。

AjaxZip2.0を使う

AjaxZip2.0を使う場合は以下のようjquery.jsとjQuery.validation.jsの間でAjaxZip2.jsを読み込み


<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/lib/ajaxzip2.js"></script>
<script type="text/javascript" src="/js/validation.js"></script>

チップと同じextension内に


$(".validate").validation({
  extension: {
    AjaxZip2: true
  }
});

とします。
AjaxZip2.0の詳しい使い方・設定などはKawa.netのページを参照してもらいたいのですが
対象にするinputのid name属性を同じextension内で指定します。


$(".validate").validation({
  extension: {
    AjaxZip2: true,
    zip: "zip",
    zip2: "zip2",
    pref: "pref",
    addr1: "addr",
    addr2: "addr2",
    addr3: "addr3" (strtに相当)
  }
});

それぞれの初期値は

  • AjaxZip2: false
  • zip: “zip”
  • zip2: null
  • pref: “pref”
  • addr1: “addr”
  • addr2: null
  • addr3: null

になりますので、構成要素が以下のような


<input type="text" name="zip" id="zip" class="zip hankaku required" />
<input type="text" name="pref" id="pref" class="required" />
<input type="text" name="addr" id="addr" class="required" />

郵便番号・都道府県・都道府県以下の住所の場合はzip～addr3の設定は必要ありません。

ダイアログの設定

必須項目が未入力または正しく記入されていないまま(エラーチップが表示されている状態)で
submitボタンを押すとダイアログが表示されますが(必須項目でなければダイアログは表示されません)

  • matOpacity: グレーアウトのレイヤーの透過度
  • dialogOpacity: ダイアログの透過度
  • duration: 表示する速さ
  • closeTitle: 閉じるボタンのtitle属性

を変更することができます。これらを変更するには、


$(".validate").validation({
  dialog: {
    duration: "fast",
    matOpacity: 0.6,
    dialogOpacity: 0.9,
    closeTitle: "このメッセージを閉じる"
  }
});

のように記述します。上記が初期値になります。
ちなみにcloseボタンはマウスホバー時に”hover”がクラスに追加されるので
CSSを使ってロールオーバーイメージを指定することができます。(サンプルでは指定済み)

ダイアログを使わずにSUBMITボタンを押せなくする

ダイアログを使いたくない場合は


$(".validate").validation({
  extension: {
    dialog: false,
    submit: "#submit"
  }
});

のように extension のプロパティで指定することで
エラーチップが表示されている場合は、SUBMITボタンをDISABLEDにできます。

submitプロパティではSUBMITボタンを指定します。
FORM要素内で使っているSUBMITボタンのIDが”SUBMIT”なら
上記のように、submit: “#submit” で指定できます。

jQueryの要素指定と同じ方法で指定できるので


submit: "input[type='submit']"

や


submit: "input[type='submit'],input[type='image']"

などのようにも指定できます。

上記複数の項目を同時に指定する場合

メッセージ、チップ・AjaxZip2.0、ダイアログを同時に設定する場合は
以下のようにそれぞれをカンマで区切って記述します。


$(".validate").validation({
  msgs: {
    submit: "<span>入力が完了していない<strong>必須項目</strong>があります。<br /><strong>必須項目は全て入力</strong>してください。</span>"
  },
  extension: {
    position: "bottom",
    top: 15,
    left: 0,
    AjaxZip2: true,
    zip: "zip",
    zip2: "zip2",
    pref: "pref",
    addr1: "addr",
    addr2: "addr2",
    addr3: "addr3"
  },
  dialog: {
    duration: "fast",
    matOpacity: 0.6,
    dialogOpacity: 0.9,
    closeTitle: "このメッセージを閉じる"
  }
});

更新履歴・追記

08.04.20
dialogを使わずにsubmitボタンがdisabledになるだけのオプションを追加しました。
AjaxZip2の実装でトリガーになる属性をNAMEではなくIDにしてしまっていたところを修正しました。
Safariで必須項目の表示が最初に表示されていなかったので修正しました。
Webkit系で読み込み後、一度クリックしないとフォームの要素が反応しないバグはjQueryをアップデートすることで解消されます。
08.02.03
select要素のグループ化に対応しました。
08.01.09
入力文字数をチェックできるようになりました。
08.12.16
郵便番号を分割した際にAjaxZip2が使えなくなってたので修正しました。
郵便番号のチェックを***(-)****にしました。(日本はこの形式しかないし。。どうでしょう…)
どうでもいいことですけど、未圧縮JSファイルのコメントを削るのをやめました。
08.12.13
checkbox、radio、複数項目を対象に含むことができるようになりました。
IE6でエラーダイアログを表示したときにselect・object要素が前面にくる現象に対処しました。
08.11.14
再入力項目をvalidation対象に含むことができるようになりました。
08.11.13
select要素をvalidation対象に含むことができるようになりました。
08.08.28
input[type="hidden"]を対象に含めてたのが原因でした。。
08.08.28
一定条件下(主にかも)でtextareaのoffset.leftが取得できずにエラーが発生するバグがあります。。。修正済(@08.08.28)
動作環境
Windows: IE6, IE7, Firefox3, Opera9.5, Safari3, Chromeで確認

Related Entries

Comments:33

  1. YOPPY

    2008.09.13 18:45

    すごいですね！シンプルなフォームがここまでできるなんて、かっこいいです！参考にさせていただきました！
    ひとつ質問があるのですが、utf-8でないと動作しないのでしょうか？？？shit_jisは無理なのでしょうか？
    ものすごい初歩的な質問かもしれませんが、宜しくお願い致します。

  2. nori

    2008.09.13 20:16

    お役に立てれば何よりです。
    HTMLがShift_jisの場合は、validation.jsを読み込むときにcharset=”utf-8″を指定すればいいです。

    <script type="text/javascript" src="/js/validation.js" charset="utf-8"></script>

  3. ぴたごら

    2008.11.13 15:50

    noriさん、はじめまして。ぴたごらと申します。

    こちらのvalidation.jsの表示がとても気に入って、ぜひ導入してみようと思いました。
    selectフォームも必須入力項目にしたいのですが、
    requiredをclassで指定しても表示されません。

    selectフォームでも、最初は必須入力の注意書きを表示しておいて、
    選択肢が選ばれたら、その注意書きが自動で消える、といったようなことは可能でしょうか？

  4. nori

    2008.11.13 20:59

    ぴたごらさん はじめまして。

    そう言われてみればselect要素を対象にしていませんでした。。
    select要素も対象に出来るように更新していますので 確認してみてくださいね。

    http://moto-mono.net/sample/validation/index.html

    一応ドキュメントも追記してますので
    こちらも併せて見てみてください。

  5. ぴたごら

    2008.11.14 0:11

    ＞ noriさん

    こんなに早く対応してくださって、どうもありがとうございます！
    新しく作っていただいたものを利用したら、select要素にもきちんと表示されるようになりました。
    本当に助かりました。感謝です。

    自サイトのフォームのアクセス解析をしていたら、エラーで離脱してしまう人が
    けっこういるようだったので、リアルタイムに入力のチェックができるものを探していました。
    そんな中でnoriさんのスクリプトが1番気に入ってしまいました♪

    このスクリプトでは、メールアドレスの形式チェックができますが、
    例えば、メールアドレスの欄を2つ作って、アドレスが一致していない場合は、
    エラーメッセージを出すようなことはできるのでしょうか？

    もしそれも可能でしたらお時間が許すときに作っていただけるとうれしいです。
    かなり図々しいお願いですみません・・・(^◇^;)

    ではでは、本当にどうもありがとうございました(^^)

  6. nori

    2008.11.14 21:02

    いえいえ 役に立てたのなら良かったです。
    エラーの離脱は多いですね。遷移後にダメって言われるのが嫌いみたいですね。
    僕も嫌いなんですけど。。

    リアルタイムは賛否両論あるみたいですけど
    僕は打ってすぐ違うのがわかったほうがいいかなと思ってます。
    結局対象ユーザに依るんでしょうね。

    再入力項目は…
    おかげで渋ってたところのやる気が出ました。

    再入力項目も対象にできるようになってますので
    またサンプルを確認してみてください。

    ドキュメントも追記してます。

  7. ぴたごら

    2008.11.15 0:22

    > noriさん

    わ～！どうもありがとうございます！！！
    ただの通りすがりにこんなに早く作っていただけるなんて・・・
    感謝感謝です。まさに希望どおりの機能です・・・。

    本当にこのスクリプトの表示かっこいいですね～！
    IE7,IE6,Firefox3,Opera9,Safari3,Google Cromeにて、
    表示の確認をさせてもらいましたが、どれも綺麗に表示されてうれしいです(^^)

    ところで、noriさん、カンパとか募集されていませんか？
    無償でこんなに早く対応していただけると、
    noriさんのgmailのアドレスにamazonギフト券などを送らないと悪い気がしてきます（笑

    ではでは、本当にどうもありがとうございました(^^)

  8. nori

    2008.11.15 14:07

    僕もやろうとは思ってたんですけど なかなか手つかずで…
    言うてもらえて よかったです。

    要望とかあればメールでもなんでもいいんで
    今回みたいに言うてもらえると助かります。

    カンパは…そうですね、今始めました。
    いやいや そんなことはないです笑
    喜んでもらえたのならそれでいいんです。

    これからも 出来るときに更新していくので
    またよければのぞいてください。

  9. ユキ

    2008.12.25 14:13

    はじめまして、まさに探していたものそのもので、早速使用させていただいています。
    ありがとうございました！

    また可能でしたら今後のアップデートの際にでも、文字数の最大数、最小数も設定できるようになると嬉しいかも。。

  10. nori

    2008.12.25 21:25

    フィードバックどうもです。
    文字数考えてはいるんですが、仕様を迷ってます…
    案が2つあるので、どちらか選んでもらえませんか？

    • length6-12のように指定をひとつにまとめて、エラーメッセージは
      「6-12文字で入力してください」と表示する
    • min6 max12のようにそれぞれ指定して、エラーメッセージは
      6文字以下なら「6文字以上で入力してください」
      13文字以上なら「12文字以内で入力してください」と表示する

    どちらがいいですか？？

  11. manjiro

    2009.01.09 17:33

    横から失礼します。
    検索してこういう便利なのがあることを知り、使わさせていただいています。

    今まさに文字数調整のがあるといいな、、、と思ってたところで、、、
    出来れば後者での実装をして頂ければと思っています。

    これからもぜひぜひ開発頑張ってください。

  12. nori

    2009.01.09 21:44

    ユキさん、manjiroさん＞

    入力文字数のチェックができるように更新しました。
    ドキュメントも追記してるので確認してみてください。

    サンプル

    manjiroさん＞

    フィードバックどうもです。
    また何かあればコメントしてもらえると助かります。

  13. caraldo_k

    2009.01.28 0:24

    はじめまして、とても素敵なプラグインですので使わせて頂きました。
    サンプルが豊富で分かりやすかったです！

    私はあまりjQuery（というかJavaScript全般）に詳しくないのですが、7項の「最後に任意のJSファイルで以下のように実行します。」部分の記述通りでは動作しませんでした。
    括弧を追ってみて、最後の「)}; 」を逆に「}); 」としたら動作しました。

    詳しい方はすぐ分かるのかも知れませんが、一応ご報告でした。

  14. ねろ

    2009.02.02 16:17

    検索していたところたどり着きました^^
    早速利用させて頂こうと思っているのですが1つ質問が・・・
    セレクトボックスの場合なのですが初期値をnullではなく0にしており
    エラーチェックをしても適応されない状態です。
    セレクトボックスに限り0であればnullと判断しエラーチェックを適応
    させたいのですがどのように変更すればいいのでしょうか？

  15. nori

    2009.02.02 16:53

    caraldo_kさん＞

    ごめんなさい、間違ってました。。。
    }); が正しいです。修正しておきました。

    ありがとうございました。
    何か要望などがあればまたコメントしてくださいね。

  16. nori

    2009.02.02 17:54

    ねろさん＞

    ソースコード195行目から始まるrequired: function(){}内の

    }else{
 return txt && txt.length > 0;
}

    を

    }else if(t.nodeName=="SELECT"){
 return txt!=0;
}else{
 return txt && txt.length > 0;
}

    にすれば大丈夫です。
    テストで変えたのをあげておきますのでよければどうぞ:D
    （ちなみに変更後のスクリプトはnullでは動作しません）

    jquery.validation.s.zip（非圧縮/4.2KB/スクリプトのみ）

  17. ねろ

    2009.02.02 20:43

    早速の対応本当に感謝です。jsは全くわからないものでなんとか
    ならないものかと四苦八苦しておりましたが助かりました！
    ついでとなってしまい申し訳ないのですがもう1つだけなんとかしたい箇所が・・・
    生年月日のセレクトボックスを以下のように年、月、日と3つ用意しております。

    –
    1950
    略
    2009

    年

    –
    1
    略
    12

    月

    –
    1
    略
    31

    日

    1つでも未選択であればエラーとしたいのですがこの場合セレクトにも
    groupを利用し何とか対応させることは可能でしょうか？

    度々で申し訳ございませんが宜しくお願い致します。

  18. nori

    2009.02.03 12:43

    あああ select要素のグループ化をすっかり忘れてました…

    対応したものに修正してますが
    ねろさん用は↓です（select要素は初期値が0です/グループ含む

    jquery.validation.s.zip（非圧縮/4.11KB/スクリプトのみ）

  19. ねろ

    2009.02.03 14:33

    バッチリです！個人的な要望に対応して頂きまして本当に
    ありがとうございました！

    今気づいたのですがhtmlの<を全角にしていなかったようでソースが
    表示されていませんでしたね・・・以後気をつけます^^;

  20. nori

    2009.02.03 19:53

    うまくいったようでよかったです。
    簡単な要望ならだいたい大丈夫です。難しいのは…笑

    ＞今気づいたのですがhtmlの<を全角にしていなかったようでソースが
    ＞表示されていませんでしたね・・・以後気をつけます^^;

    全然問題ないです:)

  21. ぴたごら

    2009.02.23 23:22

    noriさん、お久しぶりです。お元気ですか？

    ものすごいバージョンアップしていて、
    ラジオボタンやチェックボックスにまで対応しているなんて・・・
    とてもうれしいです。

    さっそく僕のサイトに反映させていただきました♪
    本当にありがとうございます。

    他にも面白そうな＆役に立ちそうなスクリプトを配布されているので、
    機会を作って導入してみますね(^^)

    ではでは、また遊びに来ます！

  22. nori

    2009.03.03 10:24

    ぴたごらさんおひさしぶりです。
    この時期は花粉にやられています…
    バイクに乗ると…つらいです…

    あとは エラーチップと エラーダイアログを
    もう少し色んなデザインに対応できればなーと思ってます
    自分でやって思ったんですけど 意外と制限が多いんですよね…

    あ よければ ぴたごらさんのサイトも見せてください:)
    メールでこっそりでもいいので*-)

  23. manjiro

    2009.03.11 19:15

    以前、コメント書かせていただいたものです。

    もしよかったらなんですが、エラー時のダイアログ機能をOFFというか簡素に出来るモードとか搭載していただけたり出来ないでしょうか・・・？

    画面全体が暗転してしまうとちょっと戸惑う場合があったりしまして・・・。
    単純にSubmitボタンが押せないとかそんなモードがもしあったら助かります。

    是非是非、ご検討下さい！

  24. nori

    2009.03.20 9:36

    遅くなりすみません。
    今調整中ですのでもう少しだけお待ちください。

  25. ゆきや

    2009.04.16 11:10

    CSS　NiTE osakaで、このサイトを知り、早速会社のサイトの応募フォームに利用させていただこうと、データなどをいただいて帰ったのですが、
    できた応募フォームの郵便番号で住所変換するところが、ieのみしか反応しません。
    ソースの書き方がおかしいのでしょうか。

    お手数ですがお返事いただけますと大変助かります。

  26. ゆきや

    2009.04.16 16:29

    連続投稿失礼します。
    住所変換がIEでしか反応しなかったのは、使っているレンタルフォームの都合で、
    name属性をfld1、fld2、という風にかえなければいけなかったからのようです。
    そこで、fld1、ｆｌｄ2といった名前で、住所変換に応用することはできないでしょうか。
    よろしくご指導ください。

  27. nori

    2009.04.17 17:42

    NAME属性がfld1、fld2となっているということは
    IDもそれぞれ同じ値になっているんでしょうか？

    NAME属性はバリデーションには関係ないので、何が入ってても大丈夫です。
    バリデーションにはID属性が必須になるので、それぞれのINPUTがIDを持つ必要があります。
    で、例えば

    • 郵便番号 id=”zip”
    • 都道府県 id=”pref”
    • 住所 id=”addr”
    • 住所2 id=”addr2″

    といった構成の場合は、validation実行時に以下のように初期化する必要があります。

    $(”対象のFORM”).validation({
    extension: {
    AjaxZip2: true,
    zip: “zip”,
    pref: “pref”,
    addr1: “addr”,
    addr2: “addr2″
    }
    });

  28. taka

    2009.05.05 11:09

    noriさん　はじめまして。

    すばらしい機能のプラグインですね。早速使わせていただきます。

    質問なのですが、このプラグインは会社のホームページで使用してもよろしいでしょうか？
    もちろん自己責任で使用するのですが、noriさんのほうで何か不都合があればおっしゃっていただきたいと思いまして・・・

  29. nori

    2009.05.05 19:02

    takaさんはじめまして。

    全然問題ないです。
    何に使ってもらっても大丈夫です :D

  30. taka

    2009.05.05 20:07

    ご返答ありがとうございます。

    またちょくちょく遊びに来させてもらいます（＾＾）

  31. tatamix

    2009.06.03 12:00

    いつもお世話になっております。
    大変便利で重宝しております。

    質問です。
    たとえばチェックボックスAがcheckedの時に、テキストエリアXを必須にする、というようなフォーム間の依存関係なんかは定義できるのでしょうか？

    強引にattr(’class’) = ‘required’と設定してみたのですが、必須扱いになりませんでした。

    暇なときでかまいませんのでご回答いただけますと幸いです。
    失礼いたします。

  32. nori

    2009.06.04 13:42

    tatamixさん＞

    対応方法を記事にしましたので確認してみてください :)
    http://bit.ly/QeHVN

  33. ken1

    2009.06.12 10:44

    はじめまして！
    バリデーションのライブラリを探していてたどり着きました。
    海外製のものも含めて、使いやすさとかっこよさ共に抜けていると思います。

    一つ質問なのですが、input要素のname,idに、スラッシュ（/）を使うと、正しく動作してくれない（ランタイムエラーが出ます）ようなのですが、これは仕様というか、スラッシュを使うのがまずいでしょうか？
    試しているのはIE7です。

Comment Form
Remember personal info

Trackbacks:9

Trackback URL for this entry
Listed below are links to weblogs that reference
リアルタイムフォームバリデーション jQuery.validation.js from 5509

  1. pingback from validation.js « moto-mono 2008.08.22 20:45

    [...] Newer [...]

  2. pingback from tirolstar has been renewal !! « moto-mono 2008.09.05 21:48

    [...] Older [...]

  3. trackback from moto-mono 2008.11.14 21:24

    validation.js をアップデートしました

    要望のあった

    select要素のチェック
    再入力項目のチェック

    を追加しました。サンプルで確認できます。
    併せて メールアドレスチェックで指定するクラスが mail から …

  4. pingback from validation.jsをアップデートしました 2 « moto-mono 2008.12.13 22:11

    [...] 使い方はjQuery.validation.jsの記事に追記しています。 [...]

  5. pingback from jQuery.validation.jsのアップデート | 5509 2009.01.09 21:37

    [...] で使い方の抜粋を載せておきます。 詳しくはjQuery.validation.jsの記事を参照してください。 [...]

  6. pingback from jQuery.validation.jsとAjax Username Checkerを組み合わせて使う | 5509 2009.02.05 0:55

    [...] リアルタイムフォームバリデーション jQuery.validation.jsselectボックスをシンプルなプルダウンに拡張するjQuery.selectable.jsAutoPagerizeをWordPressで WP-AutoPagerizeプラグインAutoPagerizeプルダウンで都 [...]

  7. pingback from [j-Query]リアルタイムでチェックできる「jQuery.validation.js」 « graphix-design.jp 2009.04.14 11:42

    [...] リアルタイムでチェックできる「jQuery.validation.js」 [...]

  8. pingback from jQuery.validation.jsのアップデート | 5509 2009.04.20 14:28

    [...] jQuery.validation.js [...]

  9. pingback from CSS Nite in OSAKA, Vol.14に参加させて頂きました。 | 5509 2009.04.20 18:16

    [...] jQuery.validation.js [...]

Blog Parts

あわせて読みたいブログパーツ

アクセス解析

pagetop