skillup

技術ブログ

JavaScript

bootstrapでのJavaScriptエラーチェック

投稿日:

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。

入力欄にフォーカスして、遷移したときにすぐにエラーチェックなどができるとユーザーにとっては使いやすいですね。

HTML側でBootstrapを使っており、そんなシステムの必要性があったのでメモしておきます。

jquery validation

http://jqueryvalidation.org/

結構有名どころみたいですね。

処理も簡単です。

ここからダウンロードし、htmlと同階層にjsというフォルダを作り、そこにおいてあげ下記のように読み込ませてあげればOKです。(※あとは後述する自作のJavaScriptを読み込ませればOKです。)

htmlのソース

まずはform部分です。

エラーチェックを行うjavascript

エラーメッセージ以下の処理はまだ私の理解が追いついてないです。

わかり次第、書いていきます・・・

参考リンク

jquery validation
http://d.hatena.ne.jp/sugyan/20090312/1236815025

bootstrapとの組み合わせ
http://qiita.com/tetsuya/items/0a5eb5356a2dfa682b90

customize版
http://weblibrary.s224.xrea.com/form/jquery_validation_sample.html

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

Angular複数ファイルでの読み込み

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。 ざっくり分けると ほとんどの処理に共通な処理を集めたファイル 特 …

no image

クリック編集のjQuery

最近のWEBサービスだと表示の画面と編集画面が同じになっていて、一見表示なんだけど、クリックすると特定の項目は編集できる、そんな画面がふえていきていますよね。 先日社内アプリをつくっていたところ、そう …