バリデーション練習　JSとjquery

### JSのみ

```php:
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>バリデーション JSのみ</title>
  <style>
    .error {
      border: 2px solid red;
    }
    .error-message {
      color: red;
      margin-left: 8px;
      font-size: 0.9em;
    }
    .input-group {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <form id="myForm" novalidate>
    <div class="input-group">
      <input type="text" id="name" placeholder="名前" />
      <span id="nameError" class="error-message"></span>
    </div>
    <div class="input-group">
      <input type="text" id="address" placeholder="住所" />
      <span id="addressError" class="error-message"></span>
    </div>
    <div class="input-group">
      <input type="text" id="phone" placeholder="電話番号" />
      <span id="phoneError" class="error-message"></span>
    </div>
    <button type="submit">送信</button>
  </form>

  <script>
    const form = document.getElementById("myForm");
    form.addEventListener("submit", function(e) {
      e.preventDefault();

      // 変数に要素を代入
      const nameInput = document.getElementById("name");
      const addressInput = document.getElementById("address");
      const phoneInput = document.getElementById("phone");

      const nameError = document.getElementById("nameError");
      const addressError = document.getElementById("addressError");
      const phoneError = document.getElementById("phoneError");

      // エラー初期化
      nameError.textContent = "";
      addressError.textContent = "";
      phoneError.textContent = "";
      nameInput.classList.remove("error");
      addressInput.classList.remove("error");
      phoneInput.classList.remove("error");

      let isValid = true;

      // バリデーションチェック
      if (nameInput.value.trim() === "") {
        nameError.textContent = "名前は必須です";
        nameInput.classList.add("error");
        isValid = false;
      }
      if (addressInput.value.trim() === "") {
        addressError.textContent = "住所は必須です";
        addressInput.classList.add("error");
        isValid = false;
      }
      if (phoneInput.value.trim() === "") {
        phoneError.textContent = "電話番号は必須です";
        phoneInput.classList.add("error");
        isValid = false;
      }

      if (isValid) {
        alert("送信成功！");
        form.reset();
      }
    });
  </script>
</body>
</html>
```

### jquery　のみ

```php;
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>バリデーション jQuery版</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .error {
      border: 2px solid red;
    }
    .error-message {
      color: red;
      margin-left: 8px;
      font-size: 0.9em;
    }
    .input-group {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <form id="myForm">
    <div class="input-group">
      <input type="text" id="name" placeholder="名前" />
      <span id="nameError" class="error-message"></span>
    </div>
    <div class="input-group">
      <input type="text" id="address" placeholder="住所" />
      <span id="addressError" class="error-message"></span>
    </div>
    <div class="input-group">
      <input type="text" id="phone" placeholder="電話番号" />
      <span id="phoneError" class="error-message"></span>
    </div>
    <button type="submit">送信</button>
  </form>

  <script>
    $(function(){
      $("#myForm").on("submit", function(e){
        e.preventDefault();

        // 変数にまとめて代入（jQuery）
        const $name = $("#name");
        const $address = $("#address");
        const $phone = $("#phone");

        const $nameError = $("#nameError");
        const $addressError = $("#addressError");
        const $phoneError = $("#phoneError");

        // エラー初期化
        $nameError.text("");
        $addressError.text("");
        $phoneError.text("");
        $name.removeClass("error");
        $address.removeClass("error");
        $phone.removeClass("error");

        let isValid = true;

        if ($name.val().trim() === "") {
          $nameError.text("名前は必須です");
          $name.addClass("error");
          isValid = false;
        }
        if ($address.val().trim() === "") {
          $addressError.text("住所は必須です");
          $address.addClass("error");
          isValid = false;
        }
        if ($phone.val().trim() === "") {
          $phoneError.text("電話番号は必須です");
          $phone.addClass("error");
          isValid = false;
        }

        if (isValid) {
          alert("送信成功！");
          this.reset();
        }
      });
    });
  </script>
</body>
</html>
```