入力formで、エラーメッセージ表示　　

<h3>表示したい画面</h3>

![スクリーンショット 2024-01-19 17.12.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628823/d7c91cf1-f575-2f61-4e1f-5537163ee366.png)


<h3>メッセージ表示　仕組み</h3>

```js:index.js
 ① 関数作成
   function emailValidation() {
 
 ② メッセージ表示したい場所、どこにあんの？(まずは全体)
  → formにある　→ fromを取得
  const form = document.getElementById('form');

 ③ メッセージを表示したい入力formのclassかid、どこにあんの？
  → name : email_confirm
  const emailComfirmField = document.getElementById('email_confirm');

 ④ メッセージのp要素とメッセージ作成
  const element = document.createElement('p');
  const message = document.createTextNode("Eメールが一致しません");
  ・p要素 : createElement('p')
  ・メッセージ作成 : createTextNode("Eメールが一致しません");

  ⑤ どこに、メッセージ表示したい？　場所指定
  　→ 入力form : 内容の上に
    → 入力formの内容の上欄、ないから新しく作って、そこに表示
    →  入力formの内容の上欄 : id : content_field
  const contentField = document.getElementById('content_field');

  ⑥メッセージ追加
   element.appendChild(message);
  ・追加 ： appendChild(message)
  
  7. メールが違ってる時だけメッセージ表示したいから、
  　 ある条件になった時だけ画面を変えたいとき、alertを設定、
    alertが一回実行されたら、alert実行後、それをすぐ消す
    設定する
    element.setAttribute('id', 'alert');
    → alert発動したら、id追加 : setAttribute('id', 'alert');
  
  8.文字を赤文字にする
  element.classList.add("alert_color");
  → classList.add("alert_color");

  9. メールが確認メールと違ってたら、
   　文字の色変えメッセージを表示するアラートイベント発動
  emailComfirmField.addEventListener('input', e => {
    if(form.email.value !== form.email_confirm.value) {
      if (!document.getElementById('alert')) {
   → 入力formにイベント発動
   addEventListener('input', e =>
   → イベント条件
   if(form.email.value !== form.email_confirm.value) {
   → alert 発火
      if (!document.getElementById('alert')) {

    11.メッセージを入力form"内容”の上欄に、空欄を作って表示する処理
        contentField.parentNode.insertBefore(element, contentField);
        → 親つくる : parentNode
        → 親の前に表示 : insertBefore(element

    12.  入力欄の文字の色を変える
        emailComfirmField.classList.add("alert_bg");
       
    13. 
        const contactInput = document.getElementById('contact_input');
        emailComfirmField.classList.add("alert_bg");
      }
    } else {
      emailComfirmField.classList.remove("alert_bg");
      element.parentNode.removeChild(element);
    }
  });
};

window.onload = function() {
  emailValidation();
};
```

<h3>html</h3>

```js:index.html
<h1>CONTACT</h1>
 <p>お問い合わせ</p>  
  </div>
    <form action="#" method="POST" id="form">
      <table class="contact" id="table">
       <tr class="contact_line">
            <td class="contact_sign"><label for="name">お名前</label></td>
            <td class="contact_input"><input type="text" name="name" id="name"> 
            </td>
          </tr>
        <tr class="contact_line">
            <td class="contact_sign"><label for="name">Eメール</label></td>
            <td class="contact_input"><input type="email" name="email" id="email"> 
            </td>
        </tr>
          <tr class="contact_line">
            <td class="contact_sign"><label for="name">Eメール(確認)</label></td>
            <td class="contact_input">
             <input type="email" name="email_confirm" id="email_confirm"></td>
          </tr>
          <tr class="contact_content" id="content_field">
            <td class="contact_sign"><label for="content">内容</label></td>
            <td class="contact_input">
            <textarea name="content" id="content"></textarea></td>
          </tr>
        </table>
        <div class="contact_btn_area">
          <button type="reset" class="contact_btn reset_btn">リセット</button>
          <button type="submit" class="contact_btn submit_btn">送信する</button>
        </div>
      </form>
```

<h3></h3>

![スクリーンショット 2024-01-19 17.32.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628823/bffb794f-567c-340d-3ea6-1e0664d566ff.png)