やりたいこと & 手順
名前だけ空欄で登録し、送信ボタンを押したらメッセージを名前
の下に表示し、メッセージを消したい
//やり方
1、入力formの下にdivを追加
class / idを指定
２.ボタンを押された処理の下に、バリデーション
処理追加
html側 : メッセージ表示用divを、名前の入力formの下に追加
before html(入力form)
<form id="userForm">
<div class="form-group">
<label for="studentname" class="label">名前</label>
<input type="text" id="studentName">
</div>
</form>
JS : ボタンを押してテーブル表示 + バリデーション 考え方
表示で使いたい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('');
ボタンを押してテーブル表示 考え方
表示で使いたいid 呼び出し、表示させる
const name = $('#studentName').val();
const age = $('#studentAge').val();
const email = $('#studentEmail').val();
const phone = $('#studentnumber').val();
$('#studentTable tbody').append(
重要ポイント
バリデーション時は、必ず空白除く
処理つけとかないと、バリデーション効かない
const name = $name.val().trim();
テーブルからデータ送信後、テーブルを空にする
処理しとかないと、テーブルにdataが残ったままに
$name.val(''); $age.val(''); $email.val(''); $phone.val('');
バリデーションは初期化してから使わないと、使えない
$('.error-message').hide().text('');
これとこれは、処理同じ
・if (name === "")
・if (!name)
注意！この書き方すると、バリデーション効かなくなる
//一個め : 変数に"$"つけてる → 意味が別もんになる
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 ? '名前を入力してください' : '年齢を入力してください')
バリデーション 二個の時の書き方
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;
}
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>