KYO

jQueryでフォームのバリデーション機能を実装する

2018年6月10日 jQuery ,

最近は、phpとjQueryをメインに勉強しています。
今回はjQueryを使って簡単なバリデーション機能を持った、フォームを作成します。

 

ソースコードはgithub

 

完成するとこんな感じです

 

 

 

バリデーションフォームの概要

phpでバリデーション処理を書くと送信ボタンを押してから、バリデーション機能を働かせていましたが、jQueryを利用すればリアルタイムでバリデーションチェックを行うことができるので、簡単なチェックは可能です。

ユーザー名とパスワードとパスワード再入力の確認を行います。

また、エラーがある状態ではボタンが押せないように非活性状態なっており、エラーがない時のみボタンが押せるように活性化状態なります。

 

ではコードを書いていきますが、フォームの見た目をかっこよくしたいのでお決まりの、bootstrap4を使います。

jQueryのバージョンは3.3.1です。

 

 

フォームの作成

 

まずはフォームを作ります。

 

index.html

 

シンプルです。

名前パスワードパスワードの確認があるだけのフォームです。

重要なのは、jQueryから操作するのでID名をきちんと識別できるようにしているところです。

ボタンのクラス名は初期状態でbtn btn-primary disabledになっていますが、バリデーションを通過した時に、btn btn-primaryというクラスに変更します。

 

 

スタイルを作る

cssは大したことをやっていませんが、エラーメッセージは赤文字で表示させるようにします。

基本的にはbootstrap4を使っていれば、おしゃれなフォームが作れるので、cssはさほど意識していません。

 

 

jQueryでバリデーション機能を実装していく

 

順を追って書いていきます。

まずはユーザー名のバリデーション機能を実装していきます

 

 

コメントに書いてある通りです。

フォームのユーザー名の部分の文字数を取得してきて、5文字以上20文字以内出ない場合は、エラーメッセージを表示させるようにしています。

 

こんな感じでパスワードのバリデーションも書いていきます

 

 

やっていることは、ユーザー名のバリデーションの時とほとんど同じです。

 

次にボタンを押す時の動作です。

ここで全てのバリデーションを通過しているか確認し、エラーがない場合のみボタン押下時に送信できるようにします

 

これもやっていることはシンプルです。

 

最後に、ボタンのクラス名を変更する処理です。
エラーがない場合のみ、ボタンの見た目を変えるようにクラス名を変更していきます。

 

これもまぁシンプルです。

注意点はクラス名を変更する時は、$(“#form_btn”).removeClass().addClass(“btn btn-primary”);とやっているように

.removeClass()でクラス名を一度削除しています。

 

 

簡単なチェックならばjQueryだけでも十分に行うことができます。

jQueryは見た目の部分を操作する印象が個人的に強かったのですが、こういった使い方もできるので面白いですね。


関連記事

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日

追記:現在のテーマでは使用していません。 現在はKYOというテーマを使っています   たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。 そういうサイトを見ると、真似したくなりますよね? でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です!       jquery...

記事やコンテンツが流れていくスライダーのアレを作ってみた

2018年7月28日

ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか?とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。 コンテンツスライダーを作る まずは作ったデモサイトをご覧く...

jQueryで超クールなタスク管理アプリを作る

2018年6月16日

このチュートリアルのクオリティが高いので共有します! 微妙にカスタマイズしつつ作りました デモ     これくらいのアプリがサクサクと作れたら気持ちいいですね。     機能としては 新規タスクの追加 タスクの編集 タスクの削除 タスクの完了 これら全てjQueryで行なっていきます。  ...

JQuery Ajaxを使うときにハマったこと

2018年6月15日

JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。   YouTubeの動画を参考にしました     いざこれを実際に作ると環境によっては動作しません。     ローカル環境からはAjaxは使えないようです。   な...

オーバーレイをかけたスライドメニューを作った[簡単]

2018年7月28日

レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。 メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。 スライドメニューを作る 前回記事やコンテンツが流れていくスライダーのアレを作っ...

レスポンシブなスティッキーヘッダーを作るチュートリアル

2018年6月18日

スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。 ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。 しかし、今回は0から作っていきます。   なぜ0から作るかというと、オシャレなステ...