jQueryフォーム操作
jQueryフォーム操作
jQueryを使ってフォームの入力値の取得、バリデーション、送信処理を学びます。
タスク
フォームの入力値の取得
jQueryを使ってフォームの入力値を取得します
フォームのバリデーション
入力値のバリデーションを行います
フォームの送信処理
フォームの送信処理を実装します
ヒント
jQueryのフォーム操作の基本を理解しましょう。
参考コード
$(function() {
$('#myForm').on('submit', function(e) {
e.preventDefault();
let isValid = true;
const name = $('#name').val();
const email = $('#email').val();
const message = $('#message').val();
if (!name) {
$('#name-error').text('名前を入力してください');
isValid = false;
} else {
$('#name-error').text('');
}
if (!email) {
$('#email-error').text('メールアドレスを入力してください');
isValid = false;
} else {
$('#email-error').text('');
}
if (!message) {
$('#message-error').text('メッセージを入力してください');
isValid = false;
} else {
$('#message-error').text('');
}
if (isValid) {
$('#success-message').text('フォームが送信されました！');
}
});
});