バリデーション付きシンプルjquery CRUD

```php:
<!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>
    #modal {
      display: none;
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5);
      align-items: center; justify-content: center;
    }
    #modalContent {
      background: #fff; padding: 20px; border-radius: 5px; width: 300px;
    }
    #errorMsg {
      color: red;
      margin-bottom: 10px;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      margin-top: 10px;
    }
    th, td {
      border: 1px solid #aaa;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>

  <div>
    <div id="errorMsg"></div>
    <input type="text" id="nameInput" placeholder="名前を入力" />
    <input type="text" id="addressInput" placeholder="住所を入力" />
    <input type="text" id="phoneInput" placeholder="電話番号を入力" />
    <button id="addBtn">追加</button>
  </div>

  <table id="nameTable">
    <thead>
      <tr>
        <th>名前</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>

  <div id="modal">
    <div id="modalContent">
      <h4>編集</h4>
      <label>名前<input type="text" id="editName"></label><br><br>
      <label>住所<input type="text" id="editAddress"></label><br><br>
      <label>電話番号<input type="text" id="editPhone"></label><br><br>
      <button id="saveBtn">保存</button>
      <button id="cancelBtn">キャンセル</button>
    </div>
  </div>

  <script>
    $(function(){
      let editingRow = null;

      // 追加ボタン押下
      $('#addBtn').click(function(){
        const name = $('#nameInput').val().trim();
        const address = $('#addressInput').val().trim();
        const phone = $('#phoneInput').val().trim();

        if(name === ''){
          $('#errorMsg').text('名前は必須です');
          return;
        }
        $('#errorMsg').text('');

        const newRow = $('<tr></tr>');
        newRow.append(`<td>${name}</td>`);
        newRow.append(`<td>${address}</td>`);
        newRow.append(`<td>${phone}</td>`);
        newRow.append(`<td><button class="editBtn">編集</button> <button class="deleteBtn">削除</button></td>`);
        $('#nameTable tbody').append(newRow);

        $('#nameInput, #addressInput, #phoneInput').val('');
      });

      // 編集ボタン押下
      $('#nameTable').on('click', '.editBtn', function(){
        editingRow = $(this).closest('tr');
        $('#editName').val(editingRow.children('td').eq(0).text());
        $('#editAddress').val(editingRow.children('td').eq(1).text());
        $('#editPhone').val(editingRow.children('td').eq(2).text());
        $('#modal').css('display', 'flex');
      });

      // 保存ボタン押下
      $('#saveBtn').click(function(){
        const newName = $('#editName').val().trim();
        if(newName === ''){
          alert('名前は必須です');
          return;
        }
        editingRow.children('td').eq(0).text(newName);
        editingRow.children('td').eq(1).text($('#editAddress').val().trim());
        editingRow.children('td').eq(2).text($('#editPhone').val().trim());
        $('#modal').hide();
      });

      // キャンセルボタン押下
      $('#cancelBtn').click(function(){
        $('#modal').hide();
      });

      // モーダルの背景クリックで閉じる
      $('#modal').click(function(e){
        if(e.target === this){
          $(this).hide();
        }
      });

      // 削除ボタン押下
      $('#nameTable').on('click', '.deleteBtn', function(){
        if(confirm('本当に削除しますか？')){
          $(this).closest('tr').remove();
        }
      });
    });
  </script>

</body>
</html>
```