【JavaScript】jQueryを使ってお問い合わせページの入力チェック

2023年9月10日

この記事では、jQueryを使ってお問い合わせフォームの入力チェックを実装するプログラミングコードについて解説していきます。

完成形

まずは、完成形を見ていきます。

お問い合わせフォームの各項目にそれぞれ記入して送信ボタンをクリックすると入力チェックを行い、未記入の場合はエラーメッセージを表示します。

※今回のコードは細かいチェックは行いません。記入欄が空白かどうかを判断してエラーメッセージを表示しています。

See the Pen js-11 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

最初にHTMLのコーディングをしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>お問い合わせ</title>
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<section class="contact-section">
  <h1 class="page-title">お問い合わせフォーム</h1>
  <form action="">
    <dl class="form-area">
      <dt><label for="name">名前</label><span>必須</span></dt>
      <dd>
        <input type="text" id="name" name="your-name">
        <p id="name-error" class="error-text"></p>
      </dd>

      <dt><label for="furigana">フリガナ</label><span>必須</span></dt>
      <dd>
        <input type="text" id="furigana" name="your-furigana">
        <p id="furigana-error" class="error-text"></p>
      </dd>

      <dt><label for="address">住所</label><span>必須</span></dt>
      <dd>
        <input type="text" id="address" name="your-address">
        <p id="address-error" class="error-text"></p>
      </dd>

      <dt><label for="email">メールアドレス</label><span>必須</span></dt>
      <dd>
        <input type="email" id="email" name="your-email">
        <p id="email-error" class="error-text"></p>
      </dd>

      <dt><label for="tel1">電話番号</label><span>必須</span></dt>
      <dd>
        <input type="text" id="tel1" name="your-tel1"> -
        <input type="text" id="tel2" name="your-tel2"> -
        <input type="text" id="tel3" name="your-tel3">
        <p id="tel-error" class="error-text"></p>
      </dd>

      <dt><label for="contact">お問い合わせ内容</label><span>必須</span></dt>
      <dd>
        <textarea id="contact" cols="30" rows="10" name="your-contact"></textarea>
        <p id="contact-error" class="error-text"></p>
      </dd>
    </dl>

    <div class="note">
      <p>
        ※ご入力の内容を確認してよろしければ「上記の内容で送信」をクリックしてください
      </p>
    </div>

    <div class="button-area">
      <button id="submit-button" type="button" value="">上記の内容で送信</button>
    </div>
  </form>
</section>

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>

<head> セクション:
- ページの文字コードとビューポートの設定を指定しています。
- ページタイトルを設定しています。
- 外部CSSファイル（ress.min.css および style.css）を読み込んでいます。
<body> セクション:
- .contact-section クラスが付与されたセクションがページ全体を包括しています。お問い合わせフォームのコンテンツがこの中に配置されます。
フォームの内容:
- .page-title クラスが付与された <h1> 要素がページタイトルを表示しています。
- form タグでフォームを開始しています。
- 各項目ごとに dt タグでラベル、dd タグで入力フィールドとエラーメッセージを包括した要素が定義されています。
エラーメッセージ:
- エラーメッセージは .error-text クラスが付与された <p> 要素で表されており、フォームの入力バリデーション時に表示されます。
「上記の内容で送信」ボタン:
- .note クラスが付与された <div> 要素が、フォームの内容確認の注意事項を表示しています。
- .button-area クラスが付与された <div> 要素が、送信ボタンを含むボタンエリアを表示しています。送信ボタンには submit-button クラスが付与されており、このボタンをクリックするとフォームが送信されます。
スクリプト:
- jQuery ライブラリと main.js ファイルが読み込まれています。これにより、フォームの動作やバリデーションなどの処理が実装される予定です。

CSSコーディング

次にCSSでスタイルを整えていきます。

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #ebe5d4;
}

.contact-section {
  max-width: 1000px;
  padding: 30px 10px 60px;
  margin: 0 auto;
}

.page-title {
  text-align: center;
  margin-bottom: 60px;
}

.form-area {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.form-area dt {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #3d546a;
  color: #fff;
  padding: 30px 15px;
  margin-bottom: 2px;
}

.form-area dt span {
  background-color: #fff;
  color: #e85c4e;
  font-size: 0.75rem;
  padding: 0 8px;
}

.form-area dd {
  width: 70%;
  background-color: #fff;
  padding: 22px 15px 20px 15px;
  margin-bottom: 2px;
}

.form-area input {
  background-color: #f2f2f2;
  padding: 8px 10px;
}

.form-area textarea {
  background-color: #f2f2f2;
  padding: 8px 10px;
}

.button-area {
  text-align: center;
}

#submit-button {
  background-color: #e85c4e;
  border-radius: 5px;
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 20px 40px;
  text-align: center;
}

#submit-button:hover {
  opacity: 0.7;
}

#name,#furigana,#address,#email,#contact {
  width: 100%;
}

#contact {
  height: 150px;
}

#tel1,
#tel2,
#tel3 {
  max-width: 80px;
}

.note{
  padding: 0 30px;
  margin-bottom: 80px;
}

.error-text {
  color: #de3f2e;
  margin-top: 2px;
}

@media screen and (max-width: 600px) {
  .form-area {
    flex-direction: column;
  }
  .form-area dt {
    width: 100%;
    display: block;
    padding: 10px;
    margin-bottom: 0;
  }
  .form-area dt span {
    margin-left: 10px;
  }
  .form-area dd {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
  }
  .form-area dd:last-child {
    margin-bottom: 0;
  }
  .note {
    padding: 0 10px;
  }
}

*:
- 全ての要素に対してマージンとパディングをリセットしています。
body:
- ページ全体の背景色を指定しています。
.contact-section:
- フォームを包むセクション全体のスタイルを指定しています。
- 最大幅とパディングを設定し、中央揃えとマージンを適用しています。
.page-title:
- ページタイトルのスタイルを指定しています。
- 中央揃えとマージンを指定しています。
.form-area, .form-area dt, .form-area dd:
- フォーム項目のスタイルを指定しています。
- フォーム項目をdisplay: flex で横並びにし、dt タグと dd タグのスタイルを設定しています。
.form-area input, .form-area textarea:
- フォーム入力フィールドのスタイルを指定しています。
- 背景色とパディングを設定しています。
.button-area, #submit-button:
- 送信ボタンのスタイルを指定しています。
- 背景色、ボーダー半径、フォントサイズなどを設定しています。
- ホバー時の透明度も指定しています。
#name,#furigana,#address,#email,#contact,#tel1,#tel2,#tel3:
- 各入力フィールドの幅を100%にして、幅に収まるよう調整しています。
#contact:
- お問い合わせ内容のテキストエリアの高さを指定しています。
#tel1, #tel2, #tel3:

電話番号入力フィールドの幅を指定しています。

.note:

フォーム注意事項のスタイルを指定しています。
パディングとマージンを設定しています。

.error-text:

エラーメッセージのスタイルを指定しています。
エラーメッセージの色とマージンを設定しています。

メディアクエリ (@media screen and (max-width: 600px)) は、画面幅が600px以下の場合に適用されるスタイルを指定しています。フォームの表示がモバイルデバイスに適したものに変わります。

JavaScriptコーディング

最後にJavaScriptのコーディングをして完成です。

今回は、jQueryを使うのでjQueryの記入方法でコーディングしていきます。

$(function(){
  $('#submit-button').on('click', function(){

    $('#name-error').text("");
    $('#furigana-error').text("");
    $('#address-error').text("");
    $('#email-error').text("");
    $('#tel-error').text("");
    $('#contact-error').text("");

    if($('input[name="your-name"]').val() == "") {
      $("#name-error").text("名前は必須項目です。");
    }
    if($('input[name="your-furigana"]').val() == "") {
      $("#furigana-error").text("フリガナは必須項目です。");
    }
    if($('input[name="your-address"]').val() == "") {
      $("#address-error").text("住所は必須項目です。");
    }
    if($('input[name="your-email"]').val() == "") {
      $("#email-error").text("メールアドレスは必須項目です。");
    }
    if(
      ($('input[name="your-tel1"]').val() == "") ||
      ($('input[name="your-tel2"]').val() == "") ||
      ($('input[name="your-tel3"]').val() == "")
    ) {
      $("#tel-error").text("電話番号は必須項目です。");
    }
    if($('textarea[name="your-contact"]').val() == "") {
      $("#contact-error").text("お問い合わせ内容は必須項目です。");
    }
  });
});

$(function(){ ... });
- ドキュメントが読み込まれた際に実行される処理を定義しています。
$('#submit-button').on('click', function(){ ... });
- 送信ボタン (#submit-button) がクリックされた際に実行される処理を定義しています。
$('#name-error').text(""); ... $('#contact-error').text("");
- 各エラーメッセージを空にする処理です。フォームが再度送信された場合に前回のエラーメッセージをリセットします。
if($('input[name="your-name"]').val() == "") { ... } など:
- 各入力項目が空欄かどうかを確認し、空欄の場合は対応するエラーメッセージを表示します。
- 例えば、名前の入力欄が空欄ならば $("#name-error").text("名前は必須項目です。"); としてエラーメッセージを表示します。
- 各入力項目ごとに同様の処理を行います。

リンク

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！