バリデーション　追加手順

### やりたいこと & 手順

```php:
   名前だけ空欄で登録し、送信ボタンを押したらメッセージを名前
 　の下に表示し、メッセージを消したい

 //やり方
   1、入力formの下にdivを追加
      class / idを指定
      
  ２.ボタンを押された処理の下に、バリデーション
     処理追加
```

### html側 : メッセージ表示用divを、名前の入力formの下に追加

```php: before html(入力form)
<form id="userForm">
  <div class="form-group">
    <label for="studentname" class="label">名前</label>
    <input type="text" id="studentName">
  </div>
</form>
```

### JS : ボタンを押してテーブル表示 + バリデーション 考え方

```php:
  表示で使いたいid 呼び出す
  表示させ、空白のぞく
  バリデーションで使いたいid 呼び出す
  バリデーション初期化
  バリデーションさせる
  バリデーションOKならテーブルに追加
  入力値をクリアに


  //code化すると
  表示で使いたいid 呼び出す
    const $name  = $('#studentName');
    const $age   = $('#studentAge');
    const $email = $('#studentEmail');
    const $phone = $('#studentnumber');
               ↓

    表示させ、空白のぞく
    const name   = $name.val().trim();
    const age    = $age.val().trim();
    const email  = $email.val().trim();
    const phone  = $phone.val().trim();

           ↓

   バリデーションで使いたいid 呼び出す
   const $nameErr   = $('#nameError');
           ↓
   バリデーション初期化
   $('.error-message').hide().text('');
           ↓
   バリデーションさせる
   if (!name) {
      $nameErr.text('名前を入力してください')
        .fadeIn('fast').delay(2000).fadeOut('fast');
      return;
    }
     　↓
   バリデーションOKならテーブルに追加
   $('#studentTable tbody').append(
      ↓
   入力値をクリアに
   $name.val(''); $age.val(''); $email.val(''); $phone.val('');
```

### ボタンを押してテーブル表示 考え方

```php:
   表示で使いたいid 呼び出し、表示させる
   const name = $('#studentName').val();
   const age = $('#studentAge').val();
   const email = $('#studentEmail').val();
   const phone = $('#studentnumber').val();

   $('#studentTable tbody').append(
```


### 重要ポイント

```php:
  バリデーション時は、必ず空白除く
  処理つけとかないと、バリデーション効かない
  const name   = $name.val().trim();

  テーブルからデータ送信後、テーブルを空にする
  処理しとかないと、テーブルにdataが残ったままに
  $name.val(''); $age.val(''); $email.val(''); $phone.val('');

  バリデーションは初期化してから使わないと、使えない
  $('.error-message').hide().text('');

  これとこれは、処理同じ
   ・if (name === "")
   ・if (!name) 
```

### 注意！この書き方すると、バリデーション効かなくなる

```php:
   //一個め : 変数に"$"つけてる　→　意味が別もんになる
   const $name  = $('#studentName').val().trim();;
   const $age   = $('#studentAge').val().trim();
   const $email = $('#studentEmail').val().trim();
   const $phone = $('#studentnumber').val().trim();

   //二個目 → バリデーションは、一種類ずつが基本だから
   if (!name || !age) {
    $('#errorMsg')
      .text(!name ? '名前を入力してください' : '年齢を入力してください')
```

### 　バリデーション　二個の時の書き方

```php:JSですまんね
 if (name === '') {
      nameError.textContent = '名前を入力してください';
      nameError.style.display = 'inline';
      setTimeout(() => { nameError.style.display = 'none'; }, 2000);
      return;
    }

    if (!age || isNaN(age) || Number(age) <= 0) {
      alert('正しい年齢を入力してください');
      return;
    }
```

```php:code全文
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テーブル表示練習</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .form-group { margin-bottom: 10px; }
    .label { display: inline-block; width: 80px; }
    .error-message { display:none; color:red; margin-left:5px; }
    table, th, td { border:1px solid #000; border-collapse:collapse; padding:5px; }
  </style>
</head>
<body>

<form id="userForm">
  <div class="form-group">
    <label class="label" for="studentName">名前</label>
    <input type="text" id="studentName">
    <div id="nameError" class="error-message" style="display:none;color:red;"></div>
  </div>
  <div class="form-group">
    <label class="label" for="studentAge">年齢</label>
    <input type="number" id="studentAge">
  </div>
  <div class="form-group">
    <label class="label" for="studentEmail">メール</label>
    <input type="email" id="studentEmail">
  </div>
  <div class="form-group">
    <label class="label" for="studentnumber">電話</label>
    <input type="text" id="studentnumber">
  </div>
  <button type="button" id="addButon">追加</button>
</form>

<hr>

<table id="studentTable">
  <thead>
    <tr><th>名前</th><th>年齢</th><th>メール</th><th>電話</th></tr>
  </thead>
  <tbody></tbody>
</table>

<script>
$(function() {
  $('#addButon').on('click', function() {
    const $name  = $('#studentName');
    const $age   = $('#studentAge');
    const $email = $('#studentEmail');
    const $phone = $('#studentnumber');

    const name   = $name.val().trim();
    const age    = $age.val().trim();
    const email  = $email.val().trim();
    const phone  = $phone.val().trim();

    // エラーメッセージ要素
    const $nameErr   = $('#nameError');

    // 前回のエラーをリセット
    $('.error-message').hide().text('');

    // バリデーション
    if (!name) {
      $nameErr.text('名前を入力してください')
               .fadeIn('fast').delay(2000).fadeOut('fast');
      return;
    }

    // テーブルへ追加
    $('#studentTable tbody').append(
      `<tr>
        <td>${name}</td>
        <td>${age}</td>
        <td>${email}</td>
        <td>${phone}</td>
      </tr>`
    );

    // フォームクリア
    $name.val(''); $age.val(''); $email.val(''); $phone.val('');
  });
});
</script>

</body>
</html>
```