SP用メニューボタン
ソレゾレブログ

技術的な事だったり日常の気になる事だったり

jQueryを使ってお問い合わせフォームのバリデーションチェックをsubmit後に実行する方法

スポンサーリンク

はじめに

スポンサーリンク

作成するお問い合わせページの説明

お問い合わせページは下記のようなページを作成していきます。

るお問い合わせページの説明1
るお問い合わせページの説明2

エラーメッセージはp要素に設定されており、通常時はスタイルにdisplay: noneが設定されているため非表示となっています。submitをクリックし、バリデーションチェック用のスクリプトが実行され、エラー判定となると、対象項目の対象エラーメッセージp要素にhiddenクラスが追加されます。このクラスにはdisplay: blockが設定されているので、エラーメッセージが表示されるようになります。

バリデーションチェックでエラーが無かった場合は、submitイベントが再実行され、送信確認ページに遷移します。

ここまでを作りこんでいきます。

お問い合わせフォームの作成

ページのコード作成

 :
<main class="contact">
    <h1>お問い合わせフォーム</h1>
    ★「contact-form」クラスを追加します★
    <form class="h-adr contact-form" action="/confirm" method="post" novalidate>
        <div class="input-text">
            <label for="yourname">氏名</label>
            ↓ ★placeholder属性を追加します★
            <input type="text" name="yourname" id="yourname" placeholder="必須" required>
            <p class="msg required">※入力必須項目です</p>
        </div>
        <div class="input-text">
            <label for="furigana">ふりがな</label>
            ↓ ★placeholder属性を追加します★
            <input type="text" name="furigana" id="furigana" placeholder="必須" required>
            <p class="msg required">※入力必須項目です</p>
            <p class="msg furigana">※ひらがなで入力してください</p>
        </div>
        <div class="input-email">
            <label for="email">メールアドレス</label>
            ↓ ★placeholder属性を追加します★
            <input type="email" name="email" id="email" placeholder="必須" required>
            <p class="msg required">※入力必須項目です</p>
            <p class="msg email-format">※メールアドレスのフォーマットが正しくありません</p>
        </div>
        <div class="input-email">
            <label for="emailConfirm">メールアドレス(確認用)</label>
            ↓ ★placeholder属性を追加します★
            <input type="email" name="emailConfirm" id="emailConfirm" placeholder="必須" required>
            <p class="msg required">※入力必須項目です</p>
            <p class="msg email-format">※メールアドレスのフォーマットが正しくありません</p>
            <p class="msg email-match">※メールアドレスが一致していません</p>
        </div>
        <div class="input-text">
            <label for="zipcode">郵便番号</label>
            <input class="p-postal-code" type="text" name="zipcode" id="zipcode">
            <p class="msg zipcode">※数字7桁で記入してください</p>
        </div>
        <div class="input-text">
            <label for="address">住所</label>
            <input class="p-region p-locality p-street-address p-extended-address " type="text" name="address" id="address">
        </div>
        <div class="input-text">
            <label for="building">建物</label>
            <input type="text" name="building" id="building">
        </div>
        <div class="textarea">
            <label for="textarea">お問い合わせ内容</label>
            ↓ ★placeholder属性を追加します★
            <textarea name="text" id="text" rows="10" placeholder="必須" required></textarea>
            <p class="msg required">※入力必須項目です</p>
        </div>
        <div class="submit">
            ↓ ★disabled属性を削除します★
            <input type="submit" value="送信確認" class="confirm-button" id="confirmButton">
        </div>
        <span class="p-country-name" style="display:none;">Japan</span>
    </form>
</main>
 :

ページのスタイル設定

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 40px;
  width: 100%;
}

main {
  width: 100%;
}

ul {
  text-decoration: none;
  list-style: none;
}

.contact h1 {
  margin-bottom: 20px;
}

form {
  width: 600px;
}

.input-checkbox {
  margin-bottom: 10px;
}

.input-checkbox .checkbox-title {
  display: inline-block;
  width: 200px;
}

.input-text,
.input-email,
.textarea {
  margin-bottom: 10px;
}

.input-text label,
.input-email label,
.textarea label {
  display: inline-block;
  width: 200px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 300px;
}

.input-checkbox span {
  margin-left: 8px;
}

.input-checkbox span:nth-of-type(1) {
  margin-left: 0px;
}

.textarea label {
  vertical-align: top;
}

.form-item {
  width: 100%;
}

.submit {
  text-align: center;
}

.msg {
  margin-left: 210px;
  font-size: 14px;
  font-weight: bold;
  color: red;
}

.msg.required,
.msg.furigana,
.msg.email-format,
.msg.email-match,
.msg.zipcode {
  display: none;
}

.msg.required.visible,
.msg.furigana.visible,
.msg.email-format.visible,
.msg.email-match.visible,
.msg.zipcode.visible{
  display: block;
}

ページを表示すると下記のようになります。ちなみに、前の記事から引き続き設定をされている方は、スクリプトが残っているのでエラーメッセージが表示されていると思います。これは後々変更していきます。

お問い合わせフォームのページ作成

スポンサーリンク

送信確認ページ

送信確認ページは適当に作成してください。POSTデータの確認をするわけではないので、「OK」などページに表示されればよいと思います。

 :
<main class="contact">
 <p>OK</p>
</main>
 :

バリデーション用のスクリプトの作成

まずは、form要素のクラス名に追加するクラスを変数に格納します。form要素のsubmitイベントを検知する為です。

const formCls = '.contact-form';

次にイベントを書きなおします。

\\\\\\\\\\\\\\\ 変更前 \\\\\\\\\\\\\\\
$(requiredClassMulti).on('keyup paste cut', keyupDelay(function () {
        :
    バリデーションチェック処理が書いてある
        :
}, 500));

\\\\\\\\\\\\\\\ 変更後 \\\\\\\\\\\\\\\
★ ↓ これを変更します。
$(formCls).submit(function (event) {
 ★ ↓ これを追加します。
   event.preventDefault();
        :
    バリデーションチェック処理が書いてある
        :
 ★ ↓ これを追加します。
  if ( $(actCls).length ){
     return false;
  } else {
     $(this).off('submit');
     $(this).submit();
  }
});

2行目を10行目のように書き換えます、6行目を23行目のように書き換えます。12行目をバリデーションチェック処理関数の上に追加します。17~22行目をバリデーションチェック処理関数の下に追加します。

リアルタイムバリデーションでは、キーボードのキーやマウスのペースト\カット操作を検知してバリデーションチェックを実行していましたが、今回はsubmitボタンのクリックをイベント検知してチェックを実行します。

submitイベントが検知されると、まずevent.preventDefault()によってsubmitイベントをキャンセルします。

キャンセル後、バリデーションチェックを実行します。その結果エラーが残っていれば以降のjQuery(Javascript)のスクリプトを止めます。エラーが無かったら、submitイベントを再実行しています。

エラーの有無は、$(actCls).lengthの結果によって判断します。$(actCls).lengthは、ページにhiddenクラス(actCls変数に格納されている)が何個あるか数えています。0個であればエラーが無く、1個以上あればエラーがあると言えます。

エラーが残っている場合は、return falseによって以降のスクリプト実行を止めます。

エラーが無かった場合は、$(this).off('submit')によって一旦submitイベントをキャンセルして、$(this).submit()によって再実行しています。キャンセル処理を入れないとうまく再実行できませんでした。

最後に不要となる関数を削除します。

★ ↓ 関数ごと削除
function validation_submit_disabled(target) {
  if( $(actCls).length && !$(target).prop('disabled') ){
     $(target).prop('disabled', true);
  } else if ( !$(actCls).length && $(target).prop('disabled') ){
     $(target).prop('disabled', false);
  }
}

★ ↓ 関数ごと削除
function keyupDelay(callback, ms) {
  let timer = 0;
  return function() {
     let context = this;
     let args = arguments;
     clearTimeout(timer);
     timer = setTimeout(function () {
        callback.apply(context, args);
     }, ms);
  };
}

★ ↓ each文事削除
$(requiredClassAry).each(function(index, target){
  validation_required(target);
});

$(formCls).submit(function (event) {
     :
 ★ ↓ 下記関数のみ削除
  validation_submit_disabled(submitBtnID);
     :
});

validation_submit_disabled関数は、バリデーションチェックでエラーがある間はsubmitボタンを無効化、クリアしたら有効化する関数です。今回はこれを使わないので削除します。

keyupDelay関数は、遅延処理用の関数です。 キーボードが操作されるたびにバリデーションチェックが走ると鬱陶しい為、リアルタイムにバリデーションチェックが走るパターンでは、遅延処理を設定して最後のデバイス操作から何ミリ秒操作が無かったらバリデーションチェックを走らせるようにしていましたが、今回はその必要が無いためkeyupDelay関数の呼び出しは削除します。

validation_required関数は、必須入力項目に値が入力されていない場合は「※入力必須項目です」のエラーメッセージを表示させる関数です。リアルタイムにバリデーションチェックが走るパターンでは、この関数をreadyイベント直下で呼び出すことで、ページ読み込み時に必須入力項目チェックを実行させていましたが、今回のパターンではこの処理はさせないので、ページ読み込み直後の関数読み込みは削除します。あっても良いのですが、私の好みで削除するだけです。

スポンサーリンク

動作確認

動作確認をしてみます。入力欄に値を入力後submitをクリックしてみてください。エラーがある場合は適宜エラーが表示され、エラーがなくなると、actionに設定したページを表示すると思います。