Web Design Leaves

<form name="myForm" method="post">
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" maxlength="15" required>
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" required>
  </div>
  <div>
    <label for="mail">メールアドレス</label>
    <input type="email" id="mail" name="mail" required>
  </div>
  <div>
    <p>色を選択してください</p>
    <!-- 必須にするには同じ name 属性の input 要素のいずれかを required に -->
    <input type="radio" name="color" value="blue" id="blue" required>
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green">
    <label for="green"> 緑 </label>
  </div>
  <div>
    <select name="season" required>
      <!-- 初期状態で選択されている option の value を ""（空）に -->
      <option value="">季節を選択してください</option>
      <option value="spring">春</option>
      <option value="summer">夏</option>
      <option value="autumn">秋</option>
      <option value="winter">冬</option>
    </select>
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea name="inquiry" id="inquiry" required maxlength="200" rows="3" cols="50"></textarea>
  </div>
  <div>
    <input type="checkbox" name="agreement" id="agreement" value="agree" required>
    <label for="agreement"> 同意する </label>
  </div>
  <button name="send">送信</button>
</form>

/*フォームを送信したように見せかけるための記述（実際に送信する通常のフォームでは不要）*/

//document.forms を使って name="myForm" の form 要素を取得
const myForm  = document.forms.myForm;  //または document.myForm

//フォームの  イベントにリスナーを登録
myForm.addEventListener('submit', (e)  => {
  //サンプル用なので実際には送信しないためデフォルトの動作（送信）を中止
  e.preventDefault();
  //入力欄をクリア
  myForm.name.value = '';
  myForm.tel.value = '';
  myForm.mail.value = '';
  myForm.inquiry.value = '';
  //ラジオボタンの集まり
  const colors = myForm.elements['color'];
  //全ての選択状態を解除
  for(let i=0; i<colors.length; i++) {
    colors[i].checked = false;
  }
  //select 要素の options 要素の集まり
  const seasons = myForm.season.options;
  //全ての選択状態を解除
  for(let i=0; i<seasons.length; i++) {
    seasons[i].selected = false;
  }
  //チェックボックスの選択状態を解除
  myForm.agreement.checked = false;
});

input {
  border: 1px solid #333;
  margin: 0;
  font-size: 90%;
  box-sizing: border-box;
}

/* 検証の要件を満たさない（:invalid を適用された）要素のスタイル */
input:invalid, textarea:invalid, select:invalid {
border-color: #900;
background-color: #FDD;
}
/* 検証の要件を満たさないラジオボタンとチェックボックスのスタイル（背景色が適用されないので） */
input[type="radio"]:invalid, input[type="checkbox"]:invalid {
box-shadow: 0 0 2px 1px red;
}
/* Safari では上記の  が反映されないので文字色を変更 */
input[type="radio"]:invalid + label, input[type="checkbox"]:invalid + label {
color: red;
}

input {
border: 1px solid #333;
margin: 0;
font-size: 90%;
box-sizing: border-box;
}

/* :user-invalid を使用 */
input:user-invalid, textarea:user-invalid, select:user-invalid {
border-color: #900;
background-color: #FDD;
}
/* :user-invalid を使用 */
input[type="radio"]:user-invalid, input[type="checkbox"]:user-invalid {
box-shadow: 0 0 2px 1px red;
}
/* :user-invalid を使用 */
input[type="radio"]:user-invalid + label, input[type="checkbox"]:user-invalid + label {
color: red;
}

<form name="myForm">
  <div>
    <label for="name">名前: </label>
    <input class="cem" type="text" name="name" id="name" required data-cem-required="名前は必須です" minlength="2" data-cem-minlength="2文字以上でご入力ください" >
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input class="cem" type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" data-cem-pattern="0から始まる番号を半角数字のみまたはハイフンを付けて入力" required data-cem-required="電話番号は必須です">
  </div>
  <div>
    <label for="mail">メールアドレス</label>
      <input class="cem" type="email" id="mail" name="mail" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" data-cem-pattern="メールの形式が正しくないようです。@ と . 及びドメイン名が必要です。" required data-cem-required="メールアドレスは必須です" minlength="8">
  </div>
  <div>
    <p>色を選択してください</p>
    <input class="cem" type="radio" name="color" value="blue" id="blue" required data-cem-required="色の選択は必須です">
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green">
    <label for="green"> 緑 </label>
  </div>
  <div>
    <select class="cem" name="season" id="season" required data-cem-required="季節の選択は必須です">
      <option value="">季節を選択してください</option>
      <option value="spring">春</option>
      <option value="summer">夏</option>
      <option value="autumn">秋</option>
      <option value="winter">冬</option>
    </select>
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea class="cem" name="inquiry" id="inquiry" maxlength="100" minlength="10" required data-cem-required="お問い合わせ内容は必須です" rows="3" cols="50"></textarea>
  </div>
  <div>
    <input class="cem" type="checkbox" name="agreement" id="agreement" value="agree" required data-cem-required="送信するにはチェックを入れてください">
    <label for="agreement"> 同意する </label>
  </div>
  <button name="send">送信</button>
</form>

//cem クラスを指定された要素を取得
const targetElems = document.querySelectorAll('.cem');

//独自のエラーメッセージを設定する関数
const setCustomErrorMessage = (elem) => {
  //setCustomValidity() に空文字を設定してエラー状態を解除
  elem.setCustomValidity('');
  //その要素が制約検証に適合しない場合は validity のプロパティ（ValidityState）をチェック
  if(!elem.validity.valid) {
    //required 属性が満たされていない（valueMissing が true）場合
    if(elem.validity.valueMissing) {
      //data-cem-required 属性の値を取得
      const dataError = elem.getAttribute('data-cem-required');
      //取得した data-cem-required 属性の値があれば
      if(dataError) {
        //独自の検証メッセージ設定し、カスタム検証をエラー状態に
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.typeMismatch) {
      //type 属性で指定されたタイプの構文に合っていない場合
      const dataError = elem.getAttribute('data-cem-type');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.patternMismatch) {
      //pattern 属性の指定と一致しない場合
       const dataError = elem.getAttribute('data-cem-pattern');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.tooShort) {
      //minlength 属性で指定された長さに満たない場合
       const dataError = elem.getAttribute('data-cem-minlength');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.tooLong) {
      //maxlength 属性で指定された長さを超えている場合
       const dataError = elem.getAttribute('data-cem-maxlength');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.rangeOverflow) {
      //max 属性で指定された最大値を超えている場合
       const dataError = elem.getAttribute('data-cem-max');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.rangeUnderflow) {
      //min 属性で指定された最小値未満の場合
       const dataError = elem.getAttribute('data-cem-min');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.stepMismatch) {
      //step 属性で指定された規則に合致しない場合
       const dataError = elem.getAttribute('data-cem-step');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.badInput) {
      //入力値がブラウザーが処理できない（変換できない）場合
       const dataError = elem.getAttribute('data-cem-badinput');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    }
  }
}

//対象の要素に input イベントのリスナーを登録
targetElems.forEach((elem) => {
  elem.addEventListener('input', (e) => {
    setCustomErrorMessage(elem);
  });
});

//送信ボタンを取得
const submitButton = document.myForm.send;
//送信ボタンのクリックイベント（フォームの submit では NG）
submitButton.addEventListener('click', ()  => {
  if(!myForm.checkValidity()){
    targetElems.forEach( (elem) => {
      if(!elem.validity.valid) {
        setCustomErrorMessage(elem);
      }
    })
  }
});

//そのページのフォームを全て取得
const myforms = document.forms;
//独自のエラーメッセージを表示する要素を格納する配列
let targetElems = [];

//取得した全てのフォームのそれぞれについて独自のエラーメッセージを表示する要素を取得
for(let form of myforms) {
  //フォームの elements プロパティ（全てのコントロール要素）を取得
  const elements = form.elements;
  //それぞれのコントロール要素を調査
  for(let elem of elements) {
    //要素に設定されている data-* 属性をまとめて取得
    const datasets = elem.dataset;
    //まとめて取得したそれぞれの data-* 属性を調査
    for(let key in datasets){
      //data-* 属性の名前の data- 以降の部分が cem で始まっていれば
      if(key.startsWith('cem')) {
        //配列に追加
        targetElems.push(elem);
        //最初の1つだけで良いので for 文を抜ける
        break;
      }
    }
  }
}

//独自のエラーメッセージを設定する関数（前述の例と同じ）
const setCustomErrorMessage = (elem) => {
  elem.setCustomValidity('');
  if(!elem.validity.valid) {
    if(elem.validity.valueMissing) {
      const dataError = elem.getAttribute('data-cem-required');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.typeMismatch) {
      const dataError = elem.getAttribute('data-cem-type');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.patternMismatch) {
       const dataError = elem.getAttribute('data-cem-pattern');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.tooShort) {
       const dataError = elem.getAttribute('data-cem-minlength');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.tooLong) {
       const dataError = elem.getAttribute('data-cem-maxlength');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.rangeOverflow) {
       const dataError = elem.getAttribute('data-cem-max');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.rangeUnderflow) {
       const dataError = elem.getAttribute('data-cem-min');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.stepMismatch) {
       const dataError = elem.getAttribute('data-cem-step');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    } else if(elem.validity.badInput) {
       const dataError = elem.getAttribute('data-cem-badinput');
      if(dataError) {
        elem.setCustomValidity(dataError);
      }
    }
  }
}

//対象の要素に input イベントのリスナーを登録
targetElems.forEach((elem) => {
  elem.addEventListener('input', (e) => {
    setCustomErrorMessage(elem);
  });
});

//class="submitBtn" の送信ボタンを全て取得
const submitButtons = document.querySelectorAll('.submitBtn');

//取得した送信ボタンにクリックイベントを設定
submitButtons.forEach((button) => {
  button.addEventListener('click', ()  => {
    //送信ボタンが属する form 要素を form プロパティで取得して checkValidity() を実行
    if(!button.form.checkValidity()){
      targetElems.forEach( (elem) => {
        if(!elem.validity.valid) {
          setCustomErrorMessage(elem);
        }
      })
    }
  });
});

<form name="myForm1">
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" required data-cem-required="名前は必須です" minlength="2" data-cem-minlength="2文字以上でご入力ください" >
  </div>
  ・・・中略（前述の例のフォームと同じ）・・・
  <div>
    <input type="checkbox" name="agreement" id="agreement" value="agree" required data-cem-required="送信するにはチェックを入れてください">
    <label for="agreement"> 同意する </label>
  </div>
  <button class="submitBtn" name="send">送信</button><!-- submitBtn クラスを指定 -->
</form>

<form name="myForm2">
  <div>
    <label for="userName">ユーザー名:  </label>
    <input type="text" name="userName" id="userName" required data-cem-required="ユーザー名は必須です" pattern="[a-zA-Z0-9]{4,10}" data-cem-pattern="半角英数字4〜10文字です" >
  </div>
  <div>
    <label for="age">年齢 </label>
    <input type="number" name="age" id="age" required data-cem-required="年齢は必須です" min="18" data-cem-min="18歳未満は対象外です" >
  </div>
  <button class="submitBtn" name="send2">送信</button><!-- submitBtn クラスを指定 -->
</form>

const myForm  = document.forms.myForm;
const email = myForm.mail;
const send = myForm.send;
const errorText = document.querySelector('#mail + span.error');

//送信ボタンに disabled 属性を設定
send.disabled = true;
//または send.setAttribute('disabled', 'disabled');

email.addEventListener('input', () => {
  if (email.validity.valid) {
    errorText.textContent = '';
    errorText.className = 'error';
    //値が有効であれば送信ボタンの disabled 属性を削除
    send.disabled = false;
    //または send.removeAttribute('disabled');
  } else {
    showError();
    //値が無効であれば送信ボタンを disabled に
    send.disabled = true;
    //または send.setAttribute('disabled', 'disabled');
  }
});

const showError = ()  => { //前述の例と同じ
  if(email.validity.valueMissing) {
    errorText.textContent = 'メールアドレスは必須です。';
  } else if(email.validity.typeMismatch) {
    errorText.textContent = '正しい形式のメールアドレスを入力してください';
  } else if(email.validity.tooShort) {
    errorText.textContent = `メールアドレスは ${ email.minLength } 文字以上です。現在の文字数：${ email.value.length }`;
  }
  errorText.className = 'error active';
  //または errorText.classList.add('active');
}

<form name="myForm" novalidate><!-- novalidate 属性を指定 -->
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" pattern=".{2,10}" required>
    <span class="error" aria-live="polite"></span>
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}">
    <span class="error" aria-live="polite"></span>
  </div>
  <div>
    <label for="mail">メールアドレス</label>
      <input type="email" id="mail" name="mail" minlength="10" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" required>
      <span class="error" aria-live="polite"></span>
  </div>
  <button name="send">送信</button>
</form>

/* エラーメッセージの基本のスタイル */
.error {
  width  : 100%;
  padding: 0;
  display: inline-block;
  font-size: 80%;
  color:red;
  box-sizing: border-box;
}

/* .active はエラーを表示する関数で追加されるクラス */
.error.active {
  padding: 0.3em;
}

//document.forms を使って name="myForm" の form 要素を取得
const myForm  = document.forms.myForm;
//name="name" の input 要素
const name = myForm.name;
//name="tel" の input 要素
const tel = myForm.tel;
//name="mail" の input 要素
const email = myForm.mail;
//検証するコントロール要素の配列
const targets = [name, tel, email];

//検証するコントロール要素に input イベントのリスナーを登録
for(let i=0; i<targets.length; i++) {
  // 入力される値が変更されるたびに値を確認
  targets[i].addEventListener('input', (e) => {
    //その要素の親要素（div 要素）。e.currentTarget は targets[i] でも同じ
    const parentDiv = e.currentTarget.parentElement;
    //親要素の div 要素のメソッドとして querySelector() で .error の span 要素を取得
    const errorSpan = parentDiv.querySelector('span.error');
    //エラーをクリア（初期化）
    errorSpan.textContent = '';
    errorSpan.classList.remove('active');
    // 入力された値が検証の要件を満たしていなければエラーを表示
    if(!targets[i].validity.valid) {
      showError(e.currentTarget);  //または showError(targets[i]);
    }
  });
}

//form 要素に submit イベントのリスナーを設定
myForm.addEventListener('submit', (e)  => {
  //form 要素で checkValidity() を実行して検証が満たされていなければ
  if(!e.currentTarget.checkValidity()){
    //それぞれのコントロール要素の validity.valid を調べる
    for(let i=0; i < targets.length; i++) {
      //そのコントロール要素が検証を満たしていなければ
      if(!targets[i].validity.valid) {
        //エラーを表示
        showError(targets[i]);
      }
    }
    //いずれかのコントロール要素で検証が満たされていなければデフォルトの動作（送信）を中止
    e.preventDefault();
  }
});

//エラーを表示し、span 要素に active クラスを追加する関数
const showError = (elem)  => {
  //エラーを表示する span 要素を取得
  const errorSpan = elem.parentElement.querySelector('span.error');
  //validity の該当するプロパティがあればメッセージを表示
  if(elem.validity.valueMissing) {
    //要素の値が空の場合のエラーメッセージを span 要素に設定
    errorSpan.textContent = '必須です'
  } else if(elem.validity.typeMismatch) {
    //typeMismatch に該当し且つ type 属性が email の要素の場合のメッセージ
    if(elem.type === 'email') {
      errorSpan.textContent =  '正しいメールアドレスの形式でお願いします';
    }else{
      //typeMismatch に該当し type 属性が email 以外（この場合該当する要素はなし）
      errorSpan.textContent =  '値をお確かめください（タイプが合いません）';
    }
  } else if(elem.validity.patternMismatch) {
    //指定された pattern に合致しない要素の場合
    if(elem.name ==='name') {
      //name 属性が name の要素
      errorSpan.textContent =  '2文字以上10文字以内でお願いします';
    } else if(elem.name ==='tel') {
      //name 属性が tel の要素
      errorSpan.textContent =  '0から始まる半角数字で入力ください（ハイフンを含めることができます）';
    } else if(elem.name ==='mail'){
      //name 属性が mail の要素
      errorSpan.textContent =  '@ とドメイン名を含む正しいメールアドレスの形式でお願いします';
    }
  } else if(elem.validity.tooShort) {
    // 入力された値が minLength を満たさない要素のエラーメッセージを設定
    errorSpan.textContent = `${ elem.minLength } 文字以上でお願いします。現在の文字数：${ elem.value.length }`;
  }
  // エラーメッセージの span 要素に active クラスを追加
  errorSpan.classList.add('active');
}

<form name="myForm" novalidate><!-- novalidate 属性を指定 -->
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" pattern=".{2,10}" required>
    <span class="error" aria-live="polite"></span>
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" required>
    <span class="error" aria-live="polite"></span>
  </div>
  <div>
    <label for="mail">メールアドレス</label>
      <input type="email" id="mail" name="mail" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" required minlength="8">
      <span class="error" aria-live="polite"></span>
  </div>
  <div>
    <p>選択してください</p>
    <!-- 必須にするには name 属性の input 要素のいずれかを required に -->
    <input type="radio" name="color" value="blue" id="blue" required>
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green">
    <label for="green"> 緑 </label>
    <span class="error" aria-live="polite"></span>
  </div>
  <div>
    <select name="season" id="season" required>
      <!-- 初期状態で選択されている項目のvalue を空に -->
      <option value="">選択してください</option>
      <option value="spring">春</option>
      <option value="summer">夏</option>
      <option value="autumn">秋</option>
      <option value="winter">冬</option>
    </select>
    <span class="error" aria-live="polite"></span>
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea name="inquiry" id="inquiry" maxlength="100" required rows="3" cols="50"></textarea>
    <span class="error" aria-live="polite"></span>
  </div>
  <div>
    <input type="checkbox" name="agreement" id="agreement" value="agree" required>
    <label for="agreement"> 同意する </label>
    <span class="error" aria-live="polite"></span>
  </div>
  <button name="send">送信</button>
</form>

/* エラーメッセージの基本のスタイル */
.error {
  width  : 100%;
  padding: 0;
  display: inline-block;
  font-size: 80%;
  color:red;
  box-sizing: border-box;
}

/* .active はエラーを表示する関数で追加されるクラス */
.error.active {
  padding: 0.3em;
}

//document.forms を使って name="myForm" の form 要素を取得
const myForm  = document.forms.myForm;
//フォームのコントロール要素全てを取得
const elements = myForm.elements;

//コントロール要素（最後のコントロールのボタンを除く）に input イベントのリスナーを登録
//または change イベントに登録（10行目の input を change に変更）
for(let i=0; i<elements.length-1; i++) {
  // 入力される値が変更されるたびに値が有効かどうかを確認
  elements[i].addEventListener('input', (e) => {
    //エラーメッセージを空にしてその span 要素のクラスを初期化
    //その要素の親要素（div 要素）。e.currentTarget は elements[i] でも同じ
    const parentDiv = e.currentTarget.parentElement;
    //親要素の div 要素のメソッドとして querySelector() で .error の span 要素を取得
    const errorSpan = parentDiv.querySelector('span.error');
    errorSpan.textContent = '';
    errorSpan.classList.remove('active');
    // 入力された値が検証の要件を満たしていなければエラーを表示
    if(!elements[i].validity.valid) {
      showError(e.currentTarget);  //または showError(elements[i]);
    }
  });
}

//form 要素に submit イベントのリスナーを設定
myForm.addEventListener('submit', (e)  => {
  //form 要素で checkValidity() を実行して検証が満たされていなければ
  if(!e.currentTarget.checkValidity()){
    //全てのコントロール要素の validity.valid を調べる
    for(let i=0; i < elements.length-1; i++) {
      //そのコントロール要素が検証を満たしていなければ
      if(!elements[i].validity.valid) {
        //エラーを表示
        showError(elements[i]);
      }
    }
    //いずれかのコントロール要素で検証が満たされていなければデフォルトの動作（送信）を中止
    e.preventDefault();
  }
});

//エラーを表示し、span 要素に active クラスを追加する関数
const showError = (elem)  => {
  const errorSpan = elem.parentElement.querySelector('span.error');
  if(elem.validity.valueMissing) {
    //要素の値が空の場合のエラーメッセージを span 要素に設定
    errorSpan.textContent = '必須です'
  } else if(elem.validity.typeMismatch) {
    //typeMismatch に該当し且つ type 属性が email の要素の場合のメッセージ
    if(elem.type === 'email') {
      errorSpan.textContent =  '正しいメールアドレスの形式でお願いします';
    }else{
      //typeMismatch に該当し type 属性が email 以外（この場合該当する要素はなし）
      errorSpan.textContent =  '値をお確かめください（タイプが合いません）';
    }
  } else if(elem.validity.patternMismatch) {
    //指定された pattern に合致しない要素の場合
    if(elem.name ==='name') {
      //name 属性が name の要素
      errorSpan.textContent =  '2文字以上10文字以内でお願いします';
    } else if(elem.name ==='tel') {
      //name 属性が tel の要素
      errorSpan.textContent =  '0から始まる半角数字で入力ください（ハイフンを含めることができます）';
    } else if(elem.name ==='mail'){
      //name 属性が mail の要素
      errorSpan.textContent =  '@ とドメイン名を含む正しいメールアドレスの形式でお願いします';
    }
  } else if(elem.validity.tooShort) {
    // 入力された値が minLength を満たさない要素のエラーメッセージを設定
    errorSpan.textContent = `${ elem.minLength } 文字以上でお願いします。現在の文字数：${ elem.value.length }`;
  } else if(elem.validity.tooLong) {
    // 入力された値が maxLength を満たさない要素のエラーメッセージを設定（これは発生しないはず）
    errorSpan.textContent = `${ elem.maxLength } 文字以内でお願いします。現在の文字数：${ elem.value.length }`;
  }
  // エラーメッセージの span 要素に active クラスを追加
  errorSpan.classList.add('active');
}

<form name="myForm" novalidate>
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" pattern=".{2,10}" required>
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" required>
  </div>
  <div>
    <label for="mail">メールアドレス</label>
    <input type="email" id="mail" name="mail" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" required minlength="8">
  </div>
  <div>
    <p>選択してください</p>
    <input type="radio" name="color" value="blue" id="blue" required>
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green">
    <label for="green"> 緑 </label>
  </div>
  <div>
    <select name="season" id="season" required>
      <option value="">選択してください</option>
      <option value="spring">春</option>
      <option value="summer">夏</option>
      <option value="autumn">秋</option>
      <option value="winter">冬</option>
    </select>
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea name="inquiry" id="inquiry" maxlength="100" required rows="3" cols="50"></textarea>
  </div>
  <div>
    <input type="checkbox" name="agreement" id="agreement" value="agree" required>
    <label for="agreement"> 同意する </label>
  </div>
  <button name="send">送信</button>
</form>

const elements = document.myForm.elements;

//エラーを表示する span 要素を生成して追加（次の for 文に含めることもできる）
for(let i=0; i<elements.length-1; i++) {
  //span 要素を生成
  const errorSpan = document.createElement('span');
  //error クラスを設定
  errorSpan.className = 'error';
  //aria-live 属性を設定
  errorSpan.setAttribute('aria-live', 'polite');
  //ラジオボタン以外
  if(elements[i].type !== 'radio') {
    //span 要素を親要素に追加
    elements[i].parentNode.appendChild(errorSpan);
  }else{
    //ラジオボタンの場合、ラジオボタンの親要素を取得
    const parentElem = elements[i].parentElement;
    //親要素から見て最初のラジオボタンの要素を取得
    const firstOfType = parentElem.querySelector('[type="radio"]');
    //最初の要素の場合のみ親要素に span 要素を追加
    if(elements[i] === firstOfType) elements[i].parentNode.appendChild(errorSpan);
  }
}

/* 以下は前述の例と同じ */

for(let i=0; i<elements.length-1; i++) {
  //input イベントが煩わしい場合は change イベントを使用
  elements[i].addEventListener('input', (e) => {
    const parentDiv = e.currentTarget.parentElement;
    const errorSpan = parentDiv.querySelector('span.error');
    errorSpan.textContent = '';
    errorSpan.classList.remove('active');
    if(!elements[i].validity.valid) {
      showError(e.currentTarget);
    }
  });
}

document.myForm.addEventListener('submit', (e)  => {
  if(!e.currentTarget.checkValidity()){
    for(let i=0; i < elements.length-1; i++) {
      if(!elements[i].validity.valid) {
        showError(elements[i]);
      }
    }
    e.preventDefault();
  }
});

//エラーを表示し、span 要素に active クラスを追加する関数
const showError = (elem)  => {
  const errorSpan = elem.parentElement.querySelector('span.error');
  if(elem.validity.valueMissing) {
    errorSpan.textContent = '必須です'
  } else if(elem.validity.typeMismatch) {
    if(elem.type === 'email') {
      errorSpan.textContent =  '正しいメールアドレスの形式でお願いします';
    }else{
      errorSpan.textContent =  '値をお確かめください（タイプが合いません）';
    }
  } else if(elem.validity.patternMismatch) {
    if(elem.name ==='name') {
      errorSpan.textContent =  '2文字以上10文字以内でお願いします';
    } else if(elem.name ==='tel') {
      errorSpan.textContent =  '0から始まる半角数字で入力ください（ハイフンを含めることができます）';
    } else if(elem.name ==='mail'){
      errorSpan.textContent =  '@ とドメイン名を含む正しいメールアドレスの形式でお願いします';
    }
  } else if(elem.validity.tooShort) {
    errorSpan.textContent = `${ elem.minLength } 文字以上でお願いします。現在の文字数：${ elem.value.length }`;
  } else if(elem.validity.tooLong) {
    errorSpan.textContent = `${ elem.maxLength } 文字以内でお願いします。現在の文字数：${ elem.value.length }`;
  }
  errorSpan.classList.add('active');
}

<form name="myForm" novalidate><!-- novalidate 属性を指定 -->
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" pattern=".{2,10}" required class="validate">
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" required class="validate">
  </div>
  <div>
    <label for="mail">メールアドレス</label>
      <input type="email" id="mail" name="mail" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" required minlength="8" class="validate">
  </div>
  <div>
    <p>選択してください</p><!-- 全てのラジオボタンに class="validate" を指定 -->
    <input type="radio" name="color" value="blue" id="blue" required class="validate">
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red" class="validate">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green" class="validate">
    <label for="green"> 緑 </label>
  </div>
  <div>
    <select name="season" id="season" required class="validate">
      <option value="">選択してください</option>
      <option value="spring">春</option>
      <option value="summer">夏</option>
      <option value="autumn">秋</option>
      <option value="winter">冬</option>
    </select>
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea name="inquiry" id="inquiry" maxlength="100" required rows="3" cols="50" class="validate"></textarea>
  </div>
  <div>
    <input type="checkbox" name="agreement" id="agreement" value="agree" required class="validate">
    <label for="agreement"> 同意する </label>
  </div>
  <button name="send">送信</button>
</form>

//検証対象の（.validate を指定した）要素を取得
const elements = document.querySelectorAll('.validate');

elements.forEach((elem) => {
  //エラーを表示する span 要素を生成して対象の要素の親要素に追加
  const errorSpan = document.createElement('span');
  errorSpan.className = 'error';
  errorSpan.setAttribute('aria-live', 'polite');
  if(elem.type !== 'radio') {
    elem.parentNode.appendChild(errorSpan);
  }else{
    const parentElem = elem.parentElement;
    const firstOfType = parentElem.querySelector('[type="radio"]');
    if(elem === firstOfType) elem.parentNode.appendChild(errorSpan);
  }
  //対象の要素に input イベントのリスナーを登録
  //input イベントが煩わしい場合は change イベントを使用
  elem.addEventListener('input', (e) => {
    const parentDiv = e.currentTarget.parentElement;
    const errorSpan = parentDiv.querySelector('span.error');
    errorSpan.textContent = '';
    errorSpan.classList.remove('active');
    if(!elem.validity.valid) {
      showError(e.currentTarget);
    }
  });
});

//form 要素に submit イベントのリスナーを設定
document.myForm.addEventListener('submit', (e)  => {
  if(!e.currentTarget.checkValidity()){
    elements.forEach( (elem) => {
      if(!elem.validity.valid) {
        showError(elem);
      }
    })
    e.preventDefault();
  }
});

//エラーを表示し、span 要素に active クラスを追加する関数
const showError = (elem)  => {
  const errorSpan = elem.parentElement.querySelector('span.error');
  if(elem.validity.valueMissing) {
    errorSpan.textContent = '必須です'
  } else if(elem.validity.typeMismatch) {
    if(elem.type === 'email') {
      errorSpan.textContent =  '正しいメールアドレスの形式でお願いします';
    }else{
      errorSpan.textContent =  '値をお確かめください（タイプが合いません）';
    }
  } else if(elem.validity.patternMismatch) {
    if(elem.name ==='name') {
      errorSpan.textContent =  '2文字以上10文字以内でお願いします';
    } else if(elem.name ==='tel') {
      errorSpan.textContent =  '0から始まる半角数字で入力ください（ハイフンを含めることができます）';
    } else if(elem.name ==='mail'){
      errorSpan.textContent =  '@ とドメイン名を含む正しいメールアドレスの形式でお願いします';
    }
  } else if(elem.validity.tooShort) {
    errorSpan.textContent = `${ elem.minLength } 文字以上でお願いします。現在の文字数：${ elem.value.length }`;
  } else if(elem.validity.tooLong) {
    errorSpan.textContent = `${ elem.maxLength } 文字以内でお願いします。現在の文字数：${ elem.value.length }`;
  }
  errorSpan.classList.add('active');
}

<form name="myForm" novalidate>
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" pattern=".{2,10}" data-error-pattern="2文字以上10文字以内" required data-error-required="名前は必須です" class="validate">
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" data-error-pattern="0から始まる番号を半角数字のみまたはハイフンを付けて入力" required data-error-required="電話番号は必須です" class="validate">
  </div>
  <div>
    <label for="mail">メールアドレス</label>
      <input type="email" id="mail" name="mail" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" data-error-pattern="メールの形式が正しくないようです。@ と . 及びドメイン名が必要です。" required data-error-required="メールアドレスは必須です" minlength="8" class="validate">
  </div>
  <div>
    <p>色を選択してください</p>
    <input type="radio" name="color" value="blue" id="blue" required data-error-required="色の選択は必須です" class="validate">
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red" class="validate">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green" class="validate">
    <label for="green"> 緑 </label>
  </div>
  <div>
    <select name="season" id="season" required data-error-required="季節の選択は必須です" class="validate">
      <option value="">季節を選択してください</option>
      <option value="spring">春</option>
      <option value="summer">夏</option>
      <option value="autumn">秋</option>
      <option value="winter">冬</option>
    </select>
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea name="inquiry" id="inquiry" maxlength="100" minlength="10" data-error-minlength="10文字以上でお願いします" required data-error-required="お問い合わせ内容は必須です" rows="3" cols="50" class="validate"></textarea>
  </div>
  <div>
    <input type="checkbox" name="agreement" id="agreement" value="agree" required data-error-required="送信するにはチェックを入れてください" class="validate">
    <label for="agreement"> 同意する </label>
  </div>
  <button name="send">送信</button>
</form>

//validate クラスを指定した要素（検証を行う要素）を全て取得
const elements = document.querySelectorAll('.validate');
//エラーを表示する span 要素に付与するクラス名
const errorClassName = 'error';

elements.forEach((elem) => {
  //対象の要素に input イベントのリスナーを登録
  elem.addEventListener('input', (e) => {
    const parentDiv = e.currentTarget.parentElement;
    const errorSpans = parentDiv.querySelectorAll('span.' + errorClassName);
    if(errorSpans) {
      errorSpans.forEach((errorSpan) => {
        elem.parentNode.removeChild(errorSpan);
      });
    }
    if(!elem.validity.valid) {
      showError(e.currentTarget);
    }
  });
});

//form 要素に submit イベントのリスナーを設定
document.myForm.addEventListener('submit', (e)  => {
  if(!e.currentTarget.checkValidity()){
    elements.forEach( (elem) => {
      if(!elem.validity.valid) {
        showError(elem);
      }
    })
    e.preventDefault();
  }
});

/*
エラーメッセージを表示する span 要素を生成して親要素に追加する関数
elem ：対象の要素
validationType ：対象の検証属性名または type（例：パターン検証なら pattern、type 属性の検証なら type など）
*/
const setupErrorMsg = (elem, validationType ) => {
  //エラーを表示する span 要素がすでに存在すれば取得（存在しなければ null が返る）
  const errorSpan = elem.parentElement.querySelector('.' + errorClassName + '.' + validationType);
  //エラーを表示する span 要素が存在しなければ
  if(!errorSpan) {
    //エラーメッセージの変数にシステムのデフォルトエラーメッセージを代入
    let errorMessage = elem.validationMessage;
    //要素に data-error-xxxx 属性が指定されていれば（xxxx は検証属性 または type 属性名）
    if(elem.hasAttribute('data-error-' + validationType)) {
      //data-error-xxxx  属性の値を取得
      const dataError = elem.getAttribute('data-error-' + validationType);
      if(dataError) {
        //data-error-xxxx 属性の値をエラーメッセージとする
        errorMessage = dataError;
      }
    }
    //エラーメッセージ表示する span 要素を生成して追加
    //span 要素を生成
    const errorSpan = document.createElement('span');
    //error 及び引数に指定されたクラスを追加（設定）
    errorSpan.classList.add(errorClassName, validationType);
    //aria-live 属性を設定
    errorSpan.setAttribute('aria-live', 'polite');
    //引数に指定されたエラーメッセージを設定
    errorSpan.textContent = errorMessage;
    //elem の親要素の子要素として追加
    elem.parentNode.appendChild(errorSpan);
  }
}

//ValidityStateのプロパティ（valueMissingなど）をチェックして対応するエラーを表示する関数
const showError = (elem)  => {
  if(elem.validity.valueMissing) {
    //required 属性が満たされていない（値がない）場合
    setupErrorMsg(elem, 'required');
  } else if(elem.validity.typeMismatch) {
    //type 属性で指定されたタイプの構文に合っていない場合
    setupErrorMsg(elem, 'type');
  } else if(elem.validity.patternMismatch) {
    //pattern 属性の指定と一致しない場合
    setupErrorMsg(elem, 'pattern');
  } else if(elem.validity.tooShort) {
    //minlength 属性で指定された長さに満たない場合
    setupErrorMsg(elem, 'minlength');
  } else if(elem.validity.tooLong) {
    //maxlength 属性で指定された長さを超えている場合
    setupErrorMsg(elem, 'maxlength');
  } else if(elem.validity.rangeOverflow) {
    //max 属性で指定された最大値を超えている場合
    setupErrorMsg(elem, 'max');
  } else if(elem.validity.rangeUnderflow) {
    //min 属性で指定された最小値未満の場合
    setupErrorMsg(elem, 'min');
  } else if(elem.validity.stepMismatch) {
    //step 属性で指定された規則に合致しない場合
    setupErrorMsg(elem, 'step');
  } else if(elem.validity.badInput) {
    //入力値がブラウザーが処理できない（変換できない）場合
    setupErrorMsg(elem, 'badinput');
  }
}

<!-- form 要素に class="validationForm" と novalidate 属性を指定 -->
<form name="myForm" class="validationForm" novalidate>
  <!--  div 要素でコントロール要素とラベル（もしあれば）を囲む -->
  <div>
    <label for="name">名前: </label>
    <!--  コントロール要素に validate クラスと検証属性を指定-->
    <input type="text" name="name" id="name" pattern=".{2,10}" data-error-pattern="2文字以上10文字以内" required data-error-required="名前は必須です" class="validate">
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <!--  独自のエラーメッセージは data-error-xxxx 属性に指定-->
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" data-error-pattern="0から始まる番号を半角数字のみまたはハイフンを付けて入力" required data-error-required="電話番号は必須です" class="validate">
  </div>
  <div>
    <label for="mail">メールアドレス</label>
      <input type="email" id="mail" name="mail" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" data-error-pattern="メールの形式が正しくないようです。@ と . 及びドメイン名が必要です。" required data-error-required="メールアドレスは必須です" minlength="8" class="validate">
  </div>
  <div>
    <p>色を選択してください</p>
    <input type="radio" name="color" value="blue" id="blue" required data-error-required="色の選択は必須です" class="validate">
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red" class="validate">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green" class="validate">
    <label for="green"> 緑 </label>
  </div>
  ・・・
  <button name="send">送信</button>
</form>

<body>
<div class="content">
<!-- form 要素に class="validationForm" と novalidate 属性を指定 -->
<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" required data-error-required="名前は必須です" class="validate">
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" data-error-required="電話番号は必須です" required class="validate">
  </div>
  <div>
    <label for="mail">メールアドレス</label>
      <input type="email" id="mail" name="mail" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" required data-error-required="メールアドレスは必須です" minlength="8" class="validate">
  </div>
  <div>
    <p>色を選択してください</p>
    <input type="radio" name="color" value="blue" id="blue" required class="validate">
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red" class="validate">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green" class="validate">
    <label for="green"> 緑 </label>
  </div>
  <div>
    <select name="season" id="season" required class="validate">
      <option value="">季節を選択してください</option>
      <option value="spring">春</option>
      <option value="summer">夏</option>
      <option value="autumn">秋</option>
      <option value="winter">冬</option>
    </select>
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea name="inquiry" id="inquiry" maxlength="100" minlength="10" required rows="3" cols="50" class="validate"></textarea>
  </div>
  <div>
    <input type="checkbox" name="agreement" id="agreement" value="agree" required data-error-required="送信するにはチェックを入れてください" class="validate">
    <label for="agreement"> 同意する </label>
  </div>
  <button name="send">送信</button>
</form>
</div>
<!--  検証用の JavaScript（myConstraintValidation.js）の読み込み -->
<script src="myConstraintValidation.js"></script>
</body>

/* エラーメッセージのスタイル */
.error {
  width : 100%;
  padding: 0;
  display: inline-block;
  font-size: 80%;
  color: red;
  box-sizing: border-box;
}

<form name="myForm" novalidate>
  <div>
    <label for="name">名前 </label>
    <input class="required" type="text" name="name" id="name">
  </div>
  <div>
    <label for="tel">電話番号 </label>
    <input class="required" type="tel" name="tel" id="tel">
  </div>
  <div>
    <label for="mail">メールアドレス </label>
    <input class="required" data-error-required="label" type="email" id="mail" name="mail">
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea class="required" data-error-required="お問い合わせ内容を入力してください"  name="inquiry" id="inquiry" rows="3" cols="50"></textarea>
  </div>
  <button name="send">送信</button>
</form>

//required クラスを指定された要素の集まり
const requiredElems = document.querySelectorAll('.required');

//値が空かどうかを検証及びエラーを表示する関数（空の場合は true を返す）
//elem ：対象の要素
const isValueMissing = (elem) => {
  //エラーメッセージの要素に追加するクラス名
  const className = 'required';
  //エラーを表示する span 要素がすでに存在すれば取得（存在しなければ null が返る）
  const errorSpan = elem.parentElement.querySelector('.error.' + className);
  //要素の値（value）の前後の空白文字を削除
  const elemValue = elem.value.trim();
  //値が空の場合はエラーを表示して true を返す
  if(elemValue.length === 0) {
    //エラーを表示する span 要素が存在しなければ
    if(!errorSpan) {
      //select 要素の場合
      if(elem.tagName === 'SELECT') {
        //addError() を使ってエラーメッセージ表示する span 要素を生成して追加
        addError(elem, className, '選択してください', 'を選択してください');
      //select 要素以外の場合
      }else{
        //addError() を使ってエラーメッセージ表示する span 要素を生成して追加
        addError(elem, className, '入力は必須です', 'は必須です');
      }
    }
    return true;
  }else{ //値が空や空白文字のみのでない場合
    //エラーメッセージ表示する span 要素がすでに存在すれば削除してエラーをクリア
    if(errorSpan) {
      elem.parentNode.removeChild(errorSpan);
    }
    return false;
  }
}

//required クラスを指定された要素に input イベントを設定（値が変更される都度に検証）
requiredElems.forEach( (elem) => {
  elem.addEventListener('input', () => {
    //要素の値が変更されたら検証を実行
    isValueMissing(elem);
  })
});

//送信時の処理
document.myForm.addEventListener('submit', (e) => {
  //検証対象の要素を検証し、要件を満たさない場合は送信を中止
  requiredElems.forEach( (elem) => {
    //検証を満たさない（isValueMissing が true を返す）場合は送信中止
    if(isValueMissing(elem)) {
      e.preventDefault();
    }
  });
});

//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
//elem ：対象の要素
//className ：エラーメッセージの要素に追加するクラス名
//defaultMessage：デフォルトのエラーメッセージ
//labelMessage：label 要素のテキストを使う場合のメッセージ（文字列）
const addError = (elem, className, defaultMessage, labelMessage) => {
  //戻り値として返す変数 errorMessage にデフォルトのエラーメッセージを代入
  let errorMessage = defaultMessage;
  //要素に data-error-xxxx 属性が指定されていれば（xxxx は第2引数の className）
  if(elem.hasAttribute('data-error-' + className)) {
    //data-error-xxxx  属性の値を取得
    const dataError = elem.getAttribute('data-error-' + className);
    //data-error-xxxx  属性の値が label であれば
    if(dataError === 'label') {
      //label 要素が存在すれば（確認しないと label 要素が存在しない場合エラー）
      if(elem.parentElement.querySelector('label')) {
        //label 要素のテキストを取得
        const label = elem.parentElement.querySelector('label').textContent;
        //テキストが空でなければ
        if(label) {
          //label 要素のテキストと引数 labelMessage でエラーメッセージを作成
          errorMessage = '「' + label + '」' + labelMessage;
        }
      }
    }else if(dataError) {// data-error-xxxx  属性の値が label 以外の場合
      //data-error-xxxx  属性の値をエラーメッセージとする
      errorMessage = dataError;
    }
  }
  //span 要素を生成
  const errorSpan = document.createElement('span');
  //error 及び引数に指定されたクラスを追加（設定）
  errorSpan.classList.add('error', className);
  //aria-live 属性を設定
  errorSpan.setAttribute('aria-live', 'polite');
  //引数に指定されたエラーメッセージを設定
  errorSpan.textContent = errorMessage;
  //elem の親要素の子要素として追加
  elem.parentNode.appendChild(errorSpan);
}

<form name="myForm" novalidate>
  <div>
    <label for="tel1">電話番号1 </label>
    <input class="required pattern" data-pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" type="tel" name="tel1" id="tel1">
  </div>
  <div>
    <label for="tel2">電話番号2 </label>
    <input class="pattern" data-pattern="tel" data-error-pattern="label" type="tel" name="tel2" id="tel2">
  </div>
  <div>
    <label for="mail1">メールアドレス1 </label>
    <input class="required pattern" data-pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" type="email" id="mail1" name="mail1">
  </div>

  <div>
    <label for="mail2">メールアドレス2 </label>
    <input class="required pattern" data-pattern="email" data-error-pattern="メールアドレスには @ やドメイン名が必要です" type="email" id="mail2" name="mail2">
  </div>
  <div>
    <label for="zipcode">郵便番号 </label>
    <input class="pattern required" data-pattern="zip" data-error-pattern="label" type="tel" name="zipcode" id="zipcode">
  </div>
  <button name="send">送信</button>
</form>

//pattern クラスを指定された要素の集まり
const patternElems =  document.querySelectorAll('.pattern');

//pattern 検証で data-pattern="email" を指定した場合に使用する正規表現パターン
const emailRegExp = /^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ui;
//pattern 検証で data-pattern="tel" を指定した場合に使用する正規表現パターン
const telRegExp = /^0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}$/;
//pattern 検証で data-pattern="zip" を指定した場合に使用する正規表現パターン
const zipRegExp = /^\d{3}-{0,1}\d{4}$/;
//pattern 検証で data-pattern="hiragana" を指定した場合に使用する正規表現パターン
const hiraganaRegExp = /^[\u3041-\u3096\u30FC]+$/; //ひらがな＋長音記号
//pattern 検証で data-pattern="katakana" を指定した場合に使用する正規表現パターン
const katakanaRegExp = /^[\u30A1-\u30FC]+$/; //カタカナ
//pattern 検証で data-pattern="hankata" を指定した場合に使用する正規表現パターン
const hankataRegExp = /^[\uFF61-\uFF9F]+$/; //半角カタカナ

//上記で定義した正規表現パターンと data-pattern 属性に指定できる文字列のマップ
//各エントリーは ['data-pattern 属性に指定する文字列', 正規表現パターン]
const patternMap = new Map([
  ['email', emailRegExp],
  ['tel', telRegExp],
  ['zip', zipRegExp],
  ['hiragana', hiraganaRegExp],
  ['katakana', katakanaRegExp],
  ['hankata', hankataRegExp],
]);

//指定されたパターンにマッチしているかを検証する関数（マッチしていない場合は true を返す）
const isPatternMismatch = (elem) => {
  //対象のクラス名
  const className = 'pattern';
  //対象の data-xxxx 属性の名前
  const attributeName = 'data-' + className;
  //検証するパターン（正規表現）を生成
  let pattern = new RegExp('^' + elem.getAttribute(attributeName) + '$');
  //先頭の方で定義されている data-pattern 属性に指定できる文字列と pattern のマップ（patternMap）から検証するパターンを設定
  patternMap.forEach((value, key) => {
    if(elem.getAttribute(attributeName) === key) {
      pattern = value;
    }
  });

  //エラーを表示する span 要素がすでに存在すれば取得（存在しなければ null が返る）
  const errorSpan = elem.parentElement.querySelector('.error.' + className);
  //要素の値（value）の前後の空白文字を削除
  const elemValue = elem.value.trim();
  //値が空でなければ
  if(elemValue !=='') {
    //値がパターンにマッチするかを test()  メソッドで判定
    if(!pattern.test(elemValue)) {
      //エラーを表示する span 要素が存在しなければ
      if(!errorSpan) {
        //addError() を使ってエラーメッセージ表示する span 要素を生成して追加
        addError(elem, className, '入力された値が正しくないようです', 'の形式が正しくないようです');
      }
      return true; //マッチしない場合は true を返す
    }else{
      //エラーメッセージ表示する span 要素がすでに存在すれば削除してエラーをクリア
      if(errorSpan) {
        elem.parentNode.removeChild(errorSpan);
      }
      return false;
    }
  //値が空でエラーを表示する要素が存在すれば削除
  }else if(elemValue ==='' && errorSpan) {
    elem.parentNode.removeChild(errorSpan);
  }
}

//pattern クラスを指定された要素に input イベントを設定（値が変更される都度に検証）
patternElems.forEach( (elem) => {
  elem.addEventListener('input', () => {
    //要素の値が変更されたら検証を実行
    isPatternMismatch(elem);
  })
});

//送信時の処理（検証対象の要素を検証し、要件を満たさない場合は送信を中止）
document.myForm.addEventListener('submit', (e) => {
  //必須の検証
  requiredElems.forEach( (elem) => {
    if(isValueMissing(elem)) {
      e.preventDefault();
    }
  });
  //パターンの検証
  patternElems.forEach( (elem) => {
    if(isPatternMismatch(elem)) {
      e.preventDefault();
    }
  });
});

/********* 以降は前述の必須の検証と同じ内容 *********/

//required クラスを指定された要素の集まり
const requiredElems = document.querySelectorAll('.required');

//値が空かどうかを検証及びエラーを表示する関数（空の場合は true を返す）
const isValueMissing = (elem) => {
  const className = 'required';
  const errorSpan = elem.parentElement.querySelector('.error.' + className);
  const elemValue = elem.value.trim();
  if(elemValue.length === 0) {
    if(!errorSpan) {
      if(elem.tagName === 'SELECT') {
        addError(elem, className, '選択してください', 'を選択してください');
      }else{
        addError(elem, className, '入力は必須です', 'は必須です');
      }
    }
    return true;
  }else{
    if(errorSpan) {
      elem.parentNode.removeChild(errorSpan);
    }
    return false;
  }
}

//required クラスを指定された要素に input イベントを設定（値が変更される都度に検証）
requiredElems.forEach( (elem) => {
  elem.addEventListener('input', () => {
    isValueMissing(elem);
  })
});

//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const addError = (elem, className, defaultMessage, labelMessage) => {
  let errorMessage = defaultMessage;
  if(elem.hasAttribute('data-error-' + className)) {
    const dataError = elem.getAttribute('data-error-' + className);
    if(dataError === 'label') {
      if(elem.parentElement.querySelector('label')) {
        const label = elem.parentElement.querySelector('label').textContent;
        if(label) {
          errorMessage = '「' + label + '」' + labelMessage;
        }
      }
    }else if(dataError) {
      errorMessage = dataError;
    }
  }
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error', className);
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}

<form name="myForm" novalidate>
  <div>
    <label for="name">名前: </label>
    <input class="required minlength" data-minlength="4" data-error-minlength="label" type="text" name="name" id="name">
  </div>
  <div>
    <label for="user">ユーザー名: </label>
    <input class="pattern" data-pattern="[a-zA-Z0-9]{3,10}" data-error-pattern="半角英数字（3〜10文字）で入力ください" type="text" name="user" id="user">
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea class="required maxlength showCount" data-maxlength="100" name="inquiry" id="inquiry" rows="4" cols="50"></textarea>
  </div>
  <button name="send">送信</button>
</form>

<form name="myForm" novalidate>
  <div>
    <label for="mail1">メールアドレス（必須） </label>
    <input class="required pattern" data-pattern="email" type="email" id="mail1" name="mail1" size="30">
  </div>
  <div>
    <label for="mail2">メールアドレス 確認用（必須）</label>
    <input class="required equal-to" data-equal-to="mail1" data-error-equal-to="入力されたメールアドレスが異なります" type="email" id="mail2" name="mail2" size="30">
  </div>
  <button name="send">送信</button>
</form>

<form name="myForm" autocomplete="off" novalidate>
  <div>
    <label for="pw1">パスワード（必須） </label>
    <input class="required pattern" type="password" data-pattern="[a-zA-Z0-9!@#$%&*]{7,10}" id="pw1" name="pw1" size="30" autocomplete="new-password">
    <input type="checkbox" class="toggle-pw" id="toggle-pw1">
    <label for="toggle-pw1"> 表示</label>
  </div>
  <div>
    <label for="pw2">パスワード 確認用（必須）</label>
    <input class="required equal-to" data-equal-to="pw1" data-error-pattern="パスワードが一致しません" type="password" id="pw2" name="pw2" size="30" autocomplete="new-password">
    <input type="checkbox" class="toggle-pw" id="toggle-pw2">
    <label for="toggle-pw2"> 表示</label>
  </div>
</form>

//チェックボックスの要素を取得
const togglePW1 = document.getElementById('toggle-pw1');
//パスワード入力欄の要素を取得
const pwElem1 = document.getElementById('pw1');

//チェックボックスの要素に change イベントを設定
togglePW1.addEventListener('change', (e) => {
  if( e.currentTarget.checked ) {
    //チェックされればパスワード入力欄の type 属性を text に
    pwElem1.setAttribute('type', 'text');
  }else{
    //チェックが外れればパスワード入力欄の type 属性を password に
    pwElem1.setAttribute('type', 'password');
  }
});

//チェックボックスの要素を取得（上記と同じ）
const togglePW2 = document.getElementById('toggle-pw2');
const pwElem2 = document.getElementById('pw2');
togglePW2.addEventListener('change', (e) => {
  if( e.currentTarget.checked ) {
    pwElem2.setAttribute('type', 'text');
  }else{
    pwElem2.setAttribute('type', 'password');
  }
});

<form name="myForm" novalidate>
  <div>
    <p>連絡方法を選択してください（複数選択可）</p>
    <input class="required" type="checkbox" name="contact[]" id="byEmail" value="Email">
    <label for="byEmail"> メール</label>
    <input type="checkbox" name="contact[]" id="byTel" value="Telephone">
    <label for="byTel"> 電話</label>
    <input type="checkbox" name="contact[]" id="byMail" value="Mail">
    <label for="byMail"> 郵便 </label>
    <input type="checkbox" name="contact[]" id="other1" value="Other1" class="toggler" data-togglerTarget="otherMethod">
    <label for="other1"> その他 </label>
    <div>
      <label for="otherMethod">その他</label>
      <input type="text" name="otherMethod" id="otherMethod" class="required">
    </div>
  </div>
  <div>
    <p>興味のある項目を選択してください（複数選択可）</p>
    <input class="required" type="checkbox" name="hobby[]" id="sports" value="Sports">
    <label for="sports"> スポーツ</label>
    <input type="checkbox" name="hobby[]" id="music" value="Music">
    <label for="music"> 音楽</label>
    <input type="checkbox" name="hobby[]" id="book" value="Book">
    <label for="book"> 読書 </label>
    <input type="checkbox" name="hobby[]" id="other2" value="Other2" class="toggler" data-togglerTarget="otherHobby">
    <label for="other2"> その他 </label>
    <div>
      <label for="otherHobby">その他</label>
      <input type="text" name="otherHobby" id="otherHobby">
    </div>
  </div>
  <div>
    <input class="required" data-error-required-checkbox="送信するには同意が必要です" type="checkbox" name="agreement" id="agreement" value="agree">
    <label for="agreement"> 同意する </label>
  </div>
  <button name="send">送信</button>
</form>

//チェックすると input 要素（テキストフィールド）を表示するチェックボックス要素の集まり
const togglers = document.querySelectorAll('.toggler');
//チェックボックスをチェックした際に表示される要素を格納する配列
const togglerTargets = [];

//.toggler を指定したチェックボックスの各要素について実行
togglers.forEach((elem) => {
  //.togglerを指定した要素により表示される要素（data-togglerTarget属性に指定されている要素）
  const togglerTarget = document.querySelector('#' + elem.getAttribute('data-togglerTarget'));
  //初期状態ではその親要素を非表示に
  togglerTarget.parentElement.style.setProperty('display', 'none');
  //配列 togglerTargets に追加
  togglerTargets.push(togglerTarget);
});

//.toggler を指定した要素を引数に取り、選択状態により親要素を表示・非表示にする関数
const toggleTarget = (elem) => {
  //data-togglerTarget 属性に指定されている要素を取得
  const target =  document.querySelector('#' + elem.getAttribute('data-togglerTarget'));
  //チェックボックスの場合
  if(elem.type === 'checkbox') {
    if(elem.checked === true) {
      //チェックされれば target の親要素を表示
     target.parentElement.style.removeProperty('display');
    }else{
      //チェックが外されたら target の親要素を非表示に
      target.parentElement.style.setProperty('display', 'none');
    }
  //ラジオボタンの場合
  }else if(elem.type === 'radio') {
    //チェックされれば target の親要素を表示
    target.parentElement.style.removeProperty('display');
    //同じ親要素を持つラジオボタンを取得
    const radios = elem.parentElement.querySelectorAll('[type="radio"]');
    //同じ親要素を持つラジオボタンにイベントリスナーを登録
    radios.forEach((elem) => {
      //選択状態が代わったら
      elem.addEventListener('change', (e) => {
        // toggler クラスが指定されていなければ
        if(elem.className !== 'toggler') {
          //target の親要素が非表示でなければ
          if(target.parentElement.style.getPropertyValue('display') !== 'none') {
            //target の親要素を非表示に
            target.parentElement.style.setProperty('display', 'none');
          }
        }
      }, {once: true}); //リスナーの呼び出しを一回のみとする
    });
  }
}

//.toggler を指定した各要素に change イベントのリスナーを登録（上記関数を指定）
togglers.forEach((elem) => {
  elem.addEventListener('change', (e) => {
    //e.currentTarget はイベントを登録した要素（elem：.toggler を指定した要素）
    toggleTarget(e.currentTarget);  //または toggleTarget(elem);
  });
});

//送信時の処理
document.myForm.addEventListener('submit', (e) => {
  //必須の検証
  requiredElems.forEach( (elem) => {
    //★★★ その要素の親要素が非表示（display:none）の場合は対象外 ★★★
    if(isValueMissing(elem) && elem.parentElement.style.getPropertyValue('display') !=='none') {
      e.preventDefault();
    }
  });
  //input 要素の親要素が非表示であればその値は送らない
  togglerTargets.forEach( (elem) => {
    //チェックボックスにチェックを入れて表示される input 要素の親要素が非表示であれば
    if(elem.parentElement.style.getPropertyValue('display') ==='none') {
      //値があればクリア（送信時にチェックされていない場合は値をサーバーに送らない）
      elem.value = '';
    }
  });
});

/********* 以降は前述の検証と同じ内容 *********/

//required クラスを指定された要素の集まり
const requiredElems = document.querySelectorAll('.required');

//値が空かどうかを検証及びエラーを表示する関数（空の場合は true を返す）
const isValueMissing = (elem) => {
  if(elem.tagName === 'INPUT' && elem.getAttribute('type') === 'checkbox') {
    const className = 'required-checkbox';
    const errorSpan = elem.parentElement.querySelector('.error.' + className);
    const checkedCheckbox = elem.parentElement.querySelector('input[type="checkbox"]:checked');
    if(checkedCheckbox === null) {
      if(!errorSpan) {
        addError(elem, className, '選択は必須です', 'の選択は必須です');
      }
      return true;
    }else{
      if(errorSpan) {
        elem.parentNode.removeChild(errorSpan);
      }
      return false;
    }
  }else{
    const className = 'required';
    const errorSpan = elem.parentElement.querySelector('.error.' + className);
    const elemValue = elem.value.trim();
    if(elemValue.length === 0) {
      if(!errorSpan) {
        if(elem.tagName === 'SELECT') {
          addError(elem, className, '選択してください', 'を選択してください');
        }else{
          addError(elem, className, '入力は必須です', 'は必須です');
        }
      }
      return true;
    }else{
      if(errorSpan) {
        elem.parentNode.removeChild(errorSpan);
      }
      return false;
    }
  }
}

//required クラスを指定された要素に input/change イベントを設定
requiredElems.forEach( (elem) => {
  if(elem.tagName === 'INPUT' && elem.getAttribute('type') === 'checkbox' ){
    const elems = elem.parentElement.querySelectorAll(elem.tagName);
    elems.forEach( (elemsChild) => {
      elemsChild.addEventListener('change', () => {
        isValueMissing(elemsChild);
      });
    });
  }else{
    elem.addEventListener('input', () => {
      isValueMissing(elem);
    });
  }
});

//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const addError = (elem, className, defaultMessage, labelMessage) => {
  let errorMessage = defaultMessage;
  if(elem.hasAttribute('data-error-' + className)) {
    const dataError = elem.getAttribute('data-error-' + className);
    if(dataError === 'label') {
      if(elem.parentElement.querySelector('label')) {
        const label = elem.parentElement.querySelector('label').textContent;
        if(label) {
          errorMessage = '「' + label + '」' + labelMessage;
        }
      }
    }else if(dataError) {
      errorMessage = dataError;
    }
  }
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error', className);
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}

<body>
<div class="content">
<!-- form 要素に class="validationForm" と novalidate 属性を指定 -->
<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="name">名前: </label>
    <input type="text" name="name" id="name" pattern=".{2,10}" data-error-pattern="2〜10文字で入力ください" required data-error-required="名前は必須です" class="validate">
  </div>
  <div>
    <label for="tel">電話番号: </label>
    <input type="tel" name="tel" id="tel" pattern="0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4}" required data-error-required="電話番号は必須です" class="validate">
  </div>
  <div>
    <label for="mail">メールアドレス</label>
      <input type="email" id="mail" name="mail" pattern="([a-zA-Z0-9\+_\-]+)(\.[a-zA-Z0-9\+_\-]+)*@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}" required data-error-required="メールアドレスは必須です" minlength="8" class="validate">
  </div>
  <div>
    <p>色を選択してください</p>
    <input type="radio" name="color" value="blue" id="blue" required class="validate">
    <label for="blue"> 青 </label>
    <input type="radio" name="color" value="red" id="red" class="validate">
    <label for="red"> 赤 </label>
    <input type="radio" name="color" value="green" id="green" class="validate">
    <label for="green"> 緑 </label>
  </div>
  <!-- 検証属性は使わず独自検証用のクラスを指定 -->
  <div>
      <p>連絡方法を選択してください（必須：複数選択可）</p>
      <input class="required" type="checkbox" name="contact" id="byEmail" value="Email" data-error-required-checkbox="少なくとも1つを選択してください">
      <label for="byEmail"> メール</label>
      <input type="checkbox" name="contact" id="byTel" value="Telephone" data-error-required-checkbox="少なくとも1つを選択してください">
      <label for="byTel"> 電話</label>
      <input type="checkbox" name="contact" id="byMail" value="Mail" data-error-required-checkbox="少なくとも1つを選択してください">
      <label for="byMail"> 郵便 </label>
      <input type="checkbox" name="contact" id="other1" value="Other1" class="toggler" data-togglerTarget="otherMethod" data-error-required-checkbox="少なくとも1つを選択してください">
      <label for="other1"> その他 </label>
      <div class="mt-10">
        <label for="otherMethod">その他</label>
        <!-- 検証属性は使わず独自検証用のクラスを指定 -->
        <input type="text" name="otherMethod" id="otherMethod" class="required" data-error-required="その他を選択した場合は入力ください">
      </div>
    </div>
  <div>
    <select name="season" id="season" required data-error-required="季節の選択は必須です。" class="validate">
      <option value="">季節を選択してください</option>
      <option value="spring">春</option>
      <option value="summer">夏</option>
      <option value="autumn">秋</option>
      <option value="winter">冬</option>
    </select>
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <!-- 検証属性は使わず独自検証用のクラスを指定 -->
    <textarea name="inquiry" id="inquiry"  class="required maxlength showCount" data-maxlength="100" rows="3" cols="50"></textarea>
  </div>
  <div>
    <input type="checkbox" name="agreement" id="agreement" value="agree" required data-error-required="送信するにはこのチェックボックスをオンにしてください"  class="validate">
    <label for="agreement"> 同意する </label>
  </div>
  <button name="send">送信</button>
</form>
</div>
<!--  制約検証を使った検証の JavaScript（myConstraintValidation.js）の読み込み -->
<script src="myConstraintValidation.js"></script>
<!--  独自の検証の JavaScript（validateMyForm.js）の読み込み -->
<script src="validateMyForm.js"></script>
</body>