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

Vue.jsについて

次の現場で使うかもしれない技術ということでvue.jsをちょこちょこっと勉強。とっていっても1時間ぐらいしか勉強しておらずイントロだけですが・・ Contents1 vue.jsとは?2 ソース3 参 …

no image

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

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

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

no image

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

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

no image

JSF+ajax

JSFでajaxを使うときにいろいろと調べたのでメモ。 やろうとしたことはWEB上で給与明細の計算をしたくて、プルダウンで月の変更したら自動的に経費が該当月に替わるというシステムです。 ajaxを使う …