「jQuery-Validation-Engine」でフォームの入力ストレスを軽減しよう!問題フォームの入力チェックをjavascriptで行うには?解決策jQueryプラグイン「jQuery-Validation-Engine」を使用する。フォームの入力ストレスを軽減する。フォームのバリデートチェックプラグイン「jQuery-Validation-Engine」で、フォームの入力ストレスを軽減し、ユーサビリティを高めましょう。DEMOはこちら※実際に「送信」を行ってもデータが送信されることはありません。※「必須」と書かれた箇所を未入力のまま「送信」ボタンをクリックすると、エラーメッセージが表示されます。住所(都道府県・市区郡)住所(町名)住所(番地・建物名)ご希望のメニュー(必須)メニュー01メニュー02メニュー03メニュー04ご質問・ご要望など「jQuery-Validation-Engine」を取得します。下記サイトにアクセスします。ZIP」ボタンをクリックします。ダウンロードしたzipファイル「jQuery-Validation-Engine-master.zip」を解凍します。解凍した「jQuery-Validation-Engine-master」フォルダの中から使用するファイルは以下の1点です。直下にある「css」フォルダの中にある「validationEngine.jquery.css」をcssフォルダへコピーします。直下にある「js」フォルダの中にある「jquery.validationEngine.min.js」をjavascriptフォルダへコピーします。直下にある「js」フォルダ→「languages」フォルダの中にある「jquery.validationEngine-ja.js」をjavascriptフォルダへコピーします。フォームの作成まず、フォームの作成を行います。最後に「jQuery-Validation-Engine」の読み込みと処理を構築します。「jquery.validationEngine.min.js」と「jquery.validationEngine-ja.js」の読み込み「jquery.validationEngine.min.js」と「jquery.validationEngine-ja.js」を読み込みます。src="ファイルパス/js/jquery.validationEngine-ja.js"></script>「validationEngine.jquery.css」の読み込み「validationEngine.jquery.css」を読み込みます。「jQuery-Validation-Engine」を実行する基本的な記述方法は以下となります。$("form").validationEngine();適用させたいformタグのセレクタを設定することで、バリデート機能が動いてくれるようになります。各入力フィールドごとにバリデートルールの設定を行う記述方法は以下となります。if($('input[name="name"]').length){$('input[name="name"]').addClass('validate[required]');}if($('input[name="kana"]').length){$('input[name="kana"]').addClass('validate[required]');}if($('input[name="email"]').length){$('input[name="email"]').addClass('validate[required,custom[email]]');}if($('input[name="tel"]').length){$('input[name="tel"]').addClass('validate[required,custom[phone]]');}if($('input.zipcode01').length){$('input.zipcode01').addClass('validate[required,custom[number],maxSize[3]]');}if($('input.zipcode02').length){$('input.zipcode02').addClass('validate[required,custom[number],maxSize[4]]');}if($('input.servicemenu').length){$('input.servicemenu').addClass('validate[required]');}ポイント!各入力フィールドにclass「validate[バリデートルールのパラメータ]」を設定することで、バリデートルールを設定することができます。複数のバリデートルールを設定したい場合は、カンマ(,)で区切ることで設定できます。バリデートルールのパラメータの一例required必須項目となり、未入力だとエラーとなります。custom[email]正しいメールアドレスの記述になっていないとエラーとなります。custom[phone]正しい電話番号の記述になっていないとエラーとなります。custom[number]半角数字のみの入力になっていないとエラーとなります。maxSize[数値(半角数字)]設定した数値の文字数より多く入力されているとエラーとなります。以下のサイトが、より詳しく解説してくれています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。解決策このサイトについて。