skillup

技術ブログ

JavaScript

bootstrapでのJavaScriptエラーチェック

投稿日:2015年11月9日 更新日:

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

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

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

jquery validation

http://jqueryvalidation.org/

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

処理も簡単です。

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

htmlのソース

まずはform部分です。

エラーチェックを行うjavascript

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

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

参考リンク

jquery validation
高機能ライブラリ「jQuery」とそのPlugin「Validation」

bootstrapとの組み合わせ
jQuery ValidationをTwitter Bootstrapと組み合わせて使う

-JavaScript
-

執筆者:


comment

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

関連記事

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

JSF+ajax

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