お問い合わせフォームのメモ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form-line {
margin-bottom: 10px;
}
.form-line label {
display: block;
}
.form-line .text-error {
display: block;
color: red;
}
</style>
</head>
<body>
<form action="" method="" novalidate>
<div class="form-line form_onamae">
<label>名前</label>
<input type="text" name="" value="">
<span class="text-error"></span>
</div>
<div class="form-line form_hurigana">
<label>ふりがな</label>
<input type="text" name="" value="">
<span class="text-error"> </span>
<!-- ここに未入力の時１０文字以上の時 文字を表示させる-->
</div>
<div class="form-line form_tel">
<label>電話番号</label>
<input type="text" name="" value="">
<span class="text-error"></span>
</div>
<div class="form-line form_email">
<label>メールアドレス</label>
<input type="email" name="" value="">
<span class="text-error"></span>
</div>
</form>
<div class="form-line">
<input type="submit" name="" value="送信">
</div>
<script>
let input_onamae = document.querySelector('.form_onamae input');
let text_oaname = document.querySelector('.form_onamae .text-error');
// 下の書き方覚える form-lineの中のinputの中のtypeのsubmit inputは閉じタグないのでこの書き方
let btn = document.querySelector(".form-line input[type='submit']");
btn.addEventListener('click', function () {
if ( ! input_onamae.value ) {
console.log('入力が必須です');
// 値の書き換え
text_oaname.textContent = "入力が必須です";
// text_oaname.innerHTML = "<b>入力が必須です</b>";
}
})
// 名前10文字以内
btn.addEventListener('click', function () {
if(input_onamae.value.length > 10){
console.log("文字数オーバー")
text_oaname.textContent = "文字数オーバー";
}
})
// ふりがな
let input_hurigana = document.querySelector('.form_hurigana input');
let text_hurigana = document.querySelector('.form_hurigana .text-error');
btn.addEventListener('click', function () {
if (!input_hurigana.value) {
console.log('入力が必須です');
// 値の書き換え
text_hurigana.textContent = "入力が必須です";
}
})
btn.addEventListener('click', function () {
if(input_hurigana.value.length > 20){
console.log("文字数オーバー")
text_hurigana.textContent = "文字数オーバー";
}
})
// 電話
let input_tel = document.querySelector('.form_tel input');
let text_tel = document.querySelector('.form_tel .text-error');
btn.addEventListener('click', function () {
if (!input_tel.value) {
console.log('入力が必須です');
// 値の書き換え
text_tel.textContent = "入力が必須です";
}
})
btn.addEventListener('click', function () {
// 数字をStringで文字列にして１２文字以上だとメッセージが出るようにしてある
if(String(input_tel.value).length > 12){
console.log("12桁以内で入力してください")
text_tel.textContent = "12桁以内で入力してください";
}
})
// メール
let input_email = document.querySelector('.form_email input');
let text_email = document.querySelector('.form_email .text-error');
btn.addEventListener('click', function () {
if (!input_email.value) {
console.log('入力が必須です');
// 値の書き換え
text_email.textContent = "入力が必須です";
}
else if(!input_email.value.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/)) {
console.log("メールアドレスが正しくありません");
text_email.textContent = "メールアドレスが正しくありません"
}
})
</script>
</body>
</html>
pタグで書くとコメント書ける