Web Design Leaves

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="name">名前 </label>
    <input class="required maxlength" data-maxlength="10" type="text" name="name" id="name">
  </div>
  <div>
    <label for="tel">電話番号 </label>
    <input class="tel" type="tel" name="tel" id="tel">
  </div>
  <div>
    <label for="email1">メールアドレス </label>
    <input class="required email" type="email" id="email1" name="email1" size="30">
  </div>
  <div>
    <label for="email2">メールアドレス 再入力（確認用）</label>
    <input class="required equal-to" data-equal-to="email1" type="email" id="email2" name="email2" size="30">
  </div>
  <div>
    <label for="subject">件名</label>
    <input type="text" class="required maxlength" data-maxlength="20" id="subject" name="subject">
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea class="required maxlength" data-maxlength="100" name="inquiry" id="inquiry" rows="5" cols="50"></textarea>
  </div>
  <button name="send">送信</button>
</form>

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

document.addEventListener('DOMContentLoaded', () => {
  //.validationForm を指定した最初の form 要素を取得
  const validationForm = document.querySelector('.validationForm');
  //.validationForm を指定した form 要素が存在すれば
  if(validationForm) {
    //エラーを表示する span 要素に付与するクラス名（エラー用のクラス）
    const errorClassName = 'error';
    
    //required クラスを指定された要素の集まり  
    const requiredElems = document.querySelectorAll('.required');
    //email クラスを指定された要素の集まり
    const emailElems =  document.querySelectorAll('.email');
    //tel クラスを指定された要素の集まり
    const telElems =  document.querySelectorAll('.tel');
    //maxlength クラスを指定された要素の集まり
    const maxlengthElems =  document.querySelectorAll('.maxlength');
    //equal-to クラスを指定された要素の集まり
    const equalToElems = document.querySelectorAll('.equal-to'); 
    
    //エラーメッセージを表示する span 要素を生成して親要素に追加する関数
    //elem ：対象の要素
    //errorMessage ：表示するエラーメッセージ
    const createError = (elem, errorMessage) => {
      //span 要素を生成
      const errorSpan = document.createElement('span');
      //エラー用のクラスを追加（設定）
      errorSpan.classList.add(errorClassName);
      //aria-live 属性を設定
      errorSpan.setAttribute('aria-live', 'polite');
      //引数に指定されたエラーメッセージを設定
      errorSpan.textContent = errorMessage;
      //elem の親要素の子要素として追加
      elem.parentNode.appendChild(errorSpan);
    }

    //form 要素の submit イベントを使った送信時の処理
    validationForm.addEventListener('submit', (e) => {
      //エラーを表示する要素を全て取得して削除（初期化）
      const errorElems = validationForm.querySelectorAll('.' + errorClassName);
      errorElems.forEach( (elem) => {
        elem.remove(); 
      });
      
      //.required を指定した要素を検証
      requiredElems.forEach( (elem) => {
        //値（value プロパティ）の前後の空白文字を削除
        const elemValue = elem.value.trim(); 
        //値が空の場合はエラーを表示してフォームの送信を中止
        if(elemValue.length === 0) {
          createError(elem, '入力は必須です');
          e.preventDefault();
        }
      });
      
      //.email を指定した要素を検証
      emailElems.forEach( (elem) => {
        //Email の検証に使用する正規表現パターン
        const pattern = /^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ui;
        //値が空でなければ
        if(elem.value !=='') {
          //test() メソッドで値を判定し、マッチしなければエラーを表示してフォームの送信を中止
          if(!pattern.test(elem.value)) {
            createError(elem, 'Email アドレスの形式が正しくないようです。');
            e.preventDefault();
          }
        }
      });
      
      //.tel を指定した要素を検証
      telElems.forEach( (elem) => {
        //電話番号の検証に使用する正規表現パターン
        const pattern = /^\(?\d{2,5}\)?[-(\.\s]{0,2}\d{1,4}[-)\.\s]{0,2}\d{3,4}$/;
        //値が空でなければ
        if(elem.value !=='') {
          //test() メソッドで値を判定し、マッチしなければエラーを表示してフォームの送信を中止
          if(!pattern.test(elem.value)) {
            createError(elem, '電話番号の形式が正しくないようです。');
            e.preventDefault();
          }
        }
      });
      
      //.maxlength を指定した要素を検証
      maxlengthElems.forEach( (elem) => {
        //data-maxlength 属性から最大文字数を取得
        const maxlength = elem.dataset.maxlength;
        //または const maxlength = elem.getAttribute('data-maxlength');
        //値が空でなければ
        if(elem.value !=='') {
          //値が maxlength を超えていればエラーを表示してフォームの送信を中止
          if(elem.value.length > maxlength) {
            createError(elem, maxlength + '文字以内でご入力ください');
            e.preventDefault();
          }
        }
      });
      
      //.equal-to を指定した要素を検証
      equalToElems.forEach( (elem) => {
        //比較対象の要素の id 
        const equalToId = elem.dataset.equalTo;
        //または const equalToId = elem.getAttribute('data-equal-to');
        //比較対象の要素
        const equalToElem = document.getElementById(equalToId);
        //値が空でなければ
        if(elem.value !=='' && equalToElem.value !==''){
          if(equalToElem.value !== elem.value) {
            createError(elem, '入力された値が異なります');
            e.preventDefault();
          }
        }
      });

      //エラーの最初の要素を取得
      const errorElem =  validationForm.querySelector('.' + errorClassName);
      //エラーがあればエラーの最初の要素の位置へスクロール
      if(errorElem) {
        const errorElemOffsetTop = errorElem.offsetTop;
        window.scrollTo({
          top: errorElemOffsetTop - 40,  //40px 上に位置を調整
          //スムーススクロール
          behavior: 'smooth'
        });
      }
    }); 
  }
});

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="name">名前 </label>
    <input class="required" type="text" name="name" id="name">
  </div>
  <div>
    <label for="inquiry">お問い合わせ内容</label>
    <textarea class="required" name="inquiry" id="inquiry" rows="5" cols="50"></textarea>
  </div>
  <button name="send">送信</button>
</form>

<script> 
//.validationForm を指定した最初の form 要素を取得
const validationForm = document.querySelector('.validationForm');
//required クラスを指定された要素の集まり  
const requiredElems = document.querySelectorAll('.required');

//送信時の処理
validationForm.addEventListener('submit', (e) => {
  //エラーを表示する要素を全て取得して削除（初期化）
  const errorElems = validationForm.querySelectorAll('.error');
  errorElems.forEach( (elem) => {
    elem.remove(); 
  });

  //.required を指定した全ての要素を forEach() でそれぞれ検証
  requiredElems.forEach( (elem) => {
    //値（value プロパティ）の前後の空白文字を削除
    const elemValue = elem.value.trim(); 
    //値が空の場合はエラーを表示してフォームの送信を中止
    if(elemValue.length === 0) {
      createError(elem, '入力は必須です');
      e.preventDefault();
    }
  });
}); 
  
//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
//elem ：対象の要素
//errorMessage ：表示するエラーメッセージ
const createError = (elem, errorMessage) => {
  //span 要素を生成
  const errorSpan = document.createElement('span');
  //エラー用のクラスを追加（設定）
  errorSpan.classList.add('error');
  //aria-live 属性を設定
  errorSpan.setAttribute('aria-live', 'polite');
  //引数に指定されたエラーメッセージを設定
  errorSpan.textContent = errorMessage;
  //elem の親要素の子要素として追加
  elem.parentNode.appendChild(errorSpan);
}
</script>

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="name">名前 </label>
    <input class="required" type="text" name="name" id="name">
  </div>
  <div>
    <label for="season">連絡方法を選択してください</label>
    <select class="required" name="season" id="season">
      <!-- 初期状態で選択状態になる option の value を ""（空）に -->
      <option value="">選択してください</option>
      <option value="email">Email</option>
      <option value="tel">電話</option>
      <option value="mail">郵便</option>
    </select>
  </div>
  <button name="send">送信</button>
</form>

<script> 
//.validationForm を指定した最初の form 要素を取得
const validationForm = document.querySelector('.validationForm');
//required クラスを指定された要素の集まり  
const requiredElems = document.querySelectorAll('.required');

//送信時の処理
validationForm.addEventListener('submit', (e) => {
  //エラー表示の初期化（一度全てのエラーを削除）
  const errorElems = validationForm.querySelectorAll('.error');
  errorElems.forEach( (elem) => {
    elem.remove(); 
  });
  
  //.required を指定した要素を検証
  requiredElems.forEach( (elem) => {
    //値（value プロパティ）の前後の空白文字を削除
    const elemValue = elem.value.trim(); 
    //値が空の場合はエラーを表示してフォームの送信を中止
    if(elemValue.length === 0) {
      //その要素が select 要素の場合
      if(elem.tagName === 'SELECT') {
        createError(elem, '選択してください');
      }else{ //その要素が select 要素以外の場合
        createError(elem, '入力は必須です');
      }
      //フォームの送信を中止
      e.preventDefault();
    }
  });
}); 
  
//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const createError = (elem, errorMessage) => {
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error');
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}
</script>

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="name">名前 </label>
    <input class="required" type="text" name="name" id="name">
  </div>
  <div>
      <p>連絡方法を選択してください（複数選択可）</p>
      <input class="required" type="checkbox" name="contact[]" id="email" value="Email">
      <label for="email"> メール</label>
      <input type="checkbox" name="contact[]" id="telephone" value="Telephone">
      <label for="telephone"> 電話</label>
      <input type="checkbox" name="contact[]" id="mail" value="Mail">
      <label for="mail"> 郵便 </label> 
    </div>
  <button name="send">送信</button>
</form>

<script> 
//.validationForm を指定した最初の form 要素を取得
const validationForm = document.querySelector('.validationForm');
//required クラスを指定された要素の集まり  
const requiredElems = document.querySelectorAll('.required');

//送信時の処理
validationForm.addEventListener('submit', (e) => {
  //エラー表示の初期化（一度全てのエラーを削除）
  const errorElems = validationForm.querySelectorAll('.error');
  errorElems.forEach( (elem) => {
    elem.remove(); 
  });

  //.required を指定した要素を検証
  requiredElems.forEach( (elem) => {
    //チェックボックスの場合
    if(elem.tagName === 'INPUT' && elem.getAttribute('type') === 'checkbox') {
      //親要素を基点に選択状態の最初のチェックボックス要素を取得
      const checked = elem.parentElement.querySelector('input[type="checkbox"]:checked');
      //選択状態のチェックボックス要素を取得できない場合
      if(checked === null) {
        //エラーを表示
        createError(elem, '少なくとも1つを選択してください');
        //フォームの送信を中止
        e.preventDefault();
      }
    }else{
      const elemValue = elem.value.trim(); 
      //値が空の場合はエラーを表示してフォームの送信を中止
      if(elemValue.length === 0) {
        if(elem.tagName === 'SELECT') {
          createError(elem, '選択してください');
        }else{
          createError(elem, '入力は必須です');
        } 
        e.preventDefault();
      } 
    }  
  });
}); 
  
//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const createError = (elem, errorMessage) => {
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error');
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}
</script>

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="name">名前 </label>
    <input class="required" type="text" name="name" id="name">
  </div>
  <div>
    <p>連絡方法を選択してください</p>
    <input type="radio" class="required" name="contact" value="Email" id="email">
    <label for="email"> メール </label>
    <input type="radio" name="contact" value="Tel" id="tel">
    <label for="tel"> 電話 </label>
    <input type="radio" name="contact" value="Mail" id="mail">
    <label for="mail"> 郵便 </label>
  </div>
  <button name="send">送信</button>
</form>

<script> 
//.validationForm を指定した最初の form 要素を取得
const validationForm = document.querySelector('.validationForm');
//required クラスを指定された要素の集まり  
const requiredElems = document.querySelectorAll('.required');

//送信時の処理
validationForm.addEventListener('submit', (e) => {
  //エラー表示の初期化（一度全てのエラーを削除）
  const errorElems = e.currentTarget.querySelectorAll('.error');
  errorElems.forEach( (elem) => {
    elem.remove(); 
  });

  //.required を指定した要素を検証
  requiredElems.forEach( (elem) => {
    //ラジオボタンの場合
    if(elem.tagName === 'INPUT' && elem.getAttribute('type') === 'radio') {
      //選択状態の最初のラジオボタン要素を取得
      const checkedRadio = elem.parentElement.querySelector('input[type="radio"]:checked');
      //選択状態のラジオボタン要素を取得できない場合
      if(checkedRadio === null) {
        createError(elem, 'いずれか1つを選択してください');
        e.preventDefault();
      }  
    }else if(elem.tagName === 'INPUT' && elem.getAttribute('type') === 'checkbox') {
      //選択状態の最初のチェックボックス要素を取得
      const checkedCheckbox = elem.parentElement.querySelector('input[type="checkbox"]:checked');
      //選択状態のチェックボックス要素を取得できない場合
      if(checkedCheckbox === null) {
        createError(elem, '少なくとも1つを選択してください');
        e.preventDefault();
      } 
    }else{
      const elemValue = elem.value.trim(); 
      //値が空の場合はエラーを表示してフォームの送信を中止
      if(elemValue.length === 0) {
        if(elem.tagName === 'SELECT') {
          createError(elem, '選択してください');
        }else{
          createError(elem, '入力は必須です');
        } 
        e.preventDefault();
      } 
    }  
  });
}); 
  
//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const createError = (elem, errorMessage) => {
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error');
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}
</script>

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="sample">サンプル </label>
    <input class="pattern" data-pattern="^\S{3,10}$" type="text" id="sample" name="sample" size="40" placeholder="空白文字以外で3文字以上10文字以下">
  </div>
  <div>
    <label for="username">ユーザー名 </label>
    <input class="pattern" data-pattern="user" type="text" id="username" name="username" size="40" placeholder="4文字以上10文字以下の半角英数字">
  </div>
  <div>
    <label for="email">メールアドレス </label>
    <input class="pattern" data-pattern="email"  type="email" id="email" name="email" size="40" placeholder="@やドメインを含む形式">
  </div>
  <div>
    <label for="tel">電話番号 </label>
    <input class="pattern" data-pattern="tel"  type="tel" name="tel" id="tel" size="40" placeholder="半角数字（カッコやハイフン使用可能）">
  </div>
  <button name="send">送信</button>
</form>

//.validationForm を指定した（最初の）要素を取得
const validationForm = document.querySelector('.validationForm');
//pattern クラスを指定された要素の集まり
const patternElems =  document.querySelectorAll('.pattern');

//form 要素の submit イベントを使った送信時の処理
validationForm.addEventListener('submit', (e) => {
  //エラーの初期化
  const errorElems = e.currentTarget.querySelectorAll('.error');
  errorElems.forEach( (elem) => {
    elem.remove(); 
  });

  //.pattern を指定した要素のパターンを検証
  patternElems.forEach( (elem) => {
    //data-pattern 属性の値を取得
    let dataPattern = elem.getAttribute('data-pattern');
    //または let dataPattern = elem.dataset.pattern;
    //正規表現パターンを格納する変数
    let pattern;
    //デフォルトのエラーメッセージ
    let errorMessage = '入力された形式が正しくないようです。';
    //data-pattern 属性の値が設定されていれば
    if(dataPattern) {
      //data-pattern 属性の値により switch 文で分岐
      switch(dataPattern) {
        //data-pattern 属性の値が email の場合
        case 'email' :
          //検証に使用するパターンを指定
          pattern = /^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ui;
          //エラーメッセージを指定
          errorMessage = 'メールアドレスの形式が正しくありません。';
          break;
        //data-pattern 属性の値が tel の場合
        case 'tel' :
          pattern = /^\(?\d{2,5}\)?[-(\.\s]{0,2}\d{1,4}[-)\.\s]{0,2}\d{3,4}$/;
          errorMessage = '電話番号の形式が正しくありません。';
          break;
        //data-pattern 属性の値が zip の場合
        case 'zip' :
          pattern = /^\d{3}-{0,1}\d{4}$/;
          errorMessage = '郵便番号の形式が正しくありません。';
          break;
        //data-pattern 属性の値が user の場合
        case 'user' :
          pattern = /^[a-zA-Z0-9]{4,10}$/;
          errorMessage = 'ユーザ名は4文字以上10文字以下の半角英数字です';
          break;  
        //data-pattern 属性の値が上記以外の場合
        default :
          //data-pattern 属性の値を使って正規表現パターンを生成
          pattern = new RegExp(dataPattern);
      } 
    }
    
    //値が空でなければ
    if(elem.value.trim() !=='') {
      //上記で生成したパターンの test() メソッドで値を判定
      if(!pattern.test(elem.value)) {
        //パターンにマッチしなければエラーを表示してフォームの送信を中止
        createError(elem, errorMessage);
        e.preventDefault();
      }
    }
  });
  
}); 
  
//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const createError = (elem, errorMessage) => {
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error');
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="sample1">サンプル（5文字以上） </label>
    <input class="minlength" data-minlength="5" type="text" id="sample1" name="sample1" size="20">
  </div>
  <div>
    <label for="sample2">サンプル（10文字以下） </label>
    <input class="maxlength" data-maxlength="10" type="text" id="sample2" name="sample2" size="20">
  </div>
  <div>
    <label for="sample3">サンプル（3文字以上10文字以下） </label>
    <input class="minlength maxlength" data-minlength="3" data-maxlength="10"  type="text" id="sample3" name="sample3" size="20">
  </div>
  <button name="send">送信</button>
</form>

//.validationForm を指定した（最初の）要素を取得
const validationForm = document.querySelector('.validationForm');
//minlength クラスを指定された要素の集まり
const minlengthElems =  document.querySelectorAll('.minlength');
//maxlength クラスを指定された要素の集まり
const maxlengthElems =  document.querySelectorAll('.maxlength');

//form 要素の submit イベントを使った送信時の処理
validationForm.addEventListener('submit', (e) => {
  //エラーの初期化
  const errorElems = e.currentTarget.querySelectorAll('.error');
  errorElems.forEach( (elem) => {
    elem.remove(); 
  });

  //.minlength を指定した要素のパターンを検証
  minlengthElems.forEach( (elem) => {
    //data-minlength 属性の値（最小文字数）を取得
    let minlength = elem.getAttribute('data-minlength');
    //または let minlength = elem.dataset.minlength;
    //エラーメッセージを作成
    let errorMessage = minlength + '文字以上で入力ください';
    //data-minlength 属性の値が設定されていて且つ値が空でなければ
    if(minlength && elem.value !=='') {
      //値が data-minlength 属性で指定された最小文字数より小さければ
      if(elem.value.length < minlength) {
        //エラーを表示してフォームの送信を中止
        createError(elem, errorMessage);
        e.preventDefault();
      }
    }
  });
  
  //.maxlength を指定した要素のパターンを検証
  maxlengthElems.forEach( (elem) => {
    //data-minlength 属性の値（最大文字数）を取得
    let maxlength = elem.getAttribute('data-maxlength');
    //または let maxlength = elem.dataset.maxlength;
    //エラーメッセージを作成
    let errorMessage = maxlength + '文字以内で入力ください';
    //data-minlength 属性の値が設定されていて且つ値が空でなければ
    if(maxlength && elem.value !=='') {
      //値が data-maxlength 属性で指定された最小文字数より大きければ
      if(elem.value.length > maxlength) {
        //エラーを表示してフォームの送信を中止
        createError(elem, errorMessage);
        e.preventDefault();
      }
    }
  });
}); 
  
//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const createError = (elem, errorMessage) => {
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error');
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="input1">Input 1</label>
    <input id="input1" name="input1">
  </div>
  <div>
    <label for="input2">Input 2</label>
    <input class="equal-to" data-equal-to="input1" id="input2" name="input2">
  </div>
  <button name="send">送信</button>
</form>

//.validationForm を指定した（最初の）要素を取得
const validationForm = document.querySelector('.validationForm');
//equal-to クラスを指定された要素の集まり
const equalToElems = document.querySelectorAll('.equal-to');  
  
//form 要素の submit イベントを使った送信時の処理
validationForm.addEventListener('submit', (e) => {
  //エラーの初期化
  const errorElems = e.currentTarget.querySelectorAll('.error');
  errorElems.forEach( (elem) => {
    elem.remove(); 
  });

  //.equal-to を指定した要素を検証
  equalToElems.forEach( (elem) => {
    //比較対象の要素の id 
    const equalToId = elem.getAttribute('data-equal-to');
    //または const equalToId = elem.dataset.equalTo; 
    //比較対象の要素
    const equalToElem = document.getElementById(equalToId);
    //値が空でなければ
    if(elem.value.trim() !=='' && equalToElem.value.trim() !==''){
      //2つの値（value）が一致しなければエラーを表示して送信を中止
      if(equalToElem.value !== elem.value) {
        createError(elem, '入力された値が異なります');
        e.preventDefault();
      }
    }
  });
}); 
  
//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const createError = (elem, errorMessage) => {
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error');
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}

<form name="myForm" class="validationForm" novalidate>
  <div>
    <label for="name">名前 </label>
    <input class="required" data-error-required="名前は必須です" name="name" id="name">
  </div>
  <div>
    <label for="username">ユーザ名 </label>
    <input class="required" data-error-required="ユーザ名を入力してください" name="username" id="username">
  </div>
  <div>
    <label for="subject">件名 </label>
    <input class="required" name="subject" id="subject">
  </div>
  <button name="send">送信</button>
</form>

//.validationForm を指定した最初の form 要素を取得
const validationForm = document.querySelector('.validationForm');
//required クラスを指定された要素の集まり  
const requiredElems = document.querySelectorAll('.required');

//送信時の処理
validationForm.addEventListener('submit', (e) => {
  //エラーを表示する要素を全て取得して削除（初期化）
  const errorElems = validationForm.querySelectorAll('.error');
  errorElems.forEach( (elem) => {
    elem.remove(); 
  });

  //.required を指定した要素を検証
  requiredElems.forEach( (elem) => {
    const elemValue = elem.value.trim(); 
    if(elemValue.length === 0) {
      //デフォルトのエラーメッセージを設定
      let errorMessage = '入力は必須です';
      //data-error-required 属性の値を取得
      const dataError = elem.getAttribute('data-error-required');
      //または const dataError = elem.dataset.errorRequired;
      if(dataError) {
        //data-error-required 属性に値が設定されていればその値をエラーメッセージに設定
        errorMessage = dataError;
      }
      createError(elem, errorMessage);
      e.preventDefault();
    }
  });
}); 
  
//エラーメッセージを表示する span 要素を生成して親要素に追加する関数
const createError = (elem, errorMessage) => {
  const errorSpan = document.createElement('span');
  errorSpan.classList.add('error');
  errorSpan.setAttribute('aria-live', 'polite');
  errorSpan.textContent = errorMessage;
  elem.parentNode.appendChild(errorSpan);
}