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

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …