JavaScriptでエラー時に赤枠で表示させる

名前、問い合わせ内容、パスワードが入力後や送信(submit)したときに空欄だった場合に入力欄を赤枠にする処理が出来ません。
CSSで赤枠に変える定義をして、JSで実際に事象がおこった場合に表示させるというのをやりたいです。
赤枠を付けることは出来ますが、JSでfunctionを用いて事象の処理をさせることができません。
ネットで調べたりいろいろしていますがどれも理解できません。

HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>課題</title>
    <meta name="description" content="課題。">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/sample.js"></script>
  </head>
  <body>
    <header>
    </header>

    <div id="main" class="contact">
      <h2>問い合わせフォーム</h2>
      <form>

        <div class="form-item">
          <p>名前：</p>
          <input class="entry-field" type="text" name="name" placeholder="名前を入力してください" required>
        </div>
        
        <div class="form-item">
          <p>問い合わせ内容：</p>
          <textarea class="entry-field" rows="5" name="inquiry" required></textarea>
        </div>
        
        <div class="form-item">
          <p>パスワード：</p>
          <input class="entry-field" type="password" name="pass" placeholder="Enteer password." >
        </div>

        <p></p>
        <button class="btn-flat-border" type="submit">送信</button>
        <button class="btn-flat-border" type="reset">リセット</button>
      </form>

    </div>
  </body>
</html>


CSS
@charset "utf-8";

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  color: #222;
  margin: 0px;
}


#main {
  margin: 80px 2.5% 0px 2.5%;
}

h2 {
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 5px #7db4e6;/*左線*/
}

.contact {
  background: white;
  margin: 80px 10% 20px 10% !important;
  padding: 0.5em 3em 1em 3em;
  border-radius: 8px;
}

.form-item {
  border: solid 0.5px silver;
  border-radius: 8px;
  padding: 0 1em 1em 1em;
  margin-bottom: 0.5em;
}

.entry-field {
  width: 75%;
  border: solid 0.75px silver;
  border-radius: 2px;
}

.entry-field:focus {
  border: solid 1px #7db4e6;
  outline: solid 1px #7db4e6;
}

.btn-flat-border {
  margin: 5% 4%;
  width: 40%;
  background: white;
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #67c5ff;
  color: white;
}

.btn-flat-border:focus {
  outline: none;
}

.entry-field:invalid {border: solid 1px red;}

yambejp

2022/03/08 00:44

同じような質問を繰り返していますが前の質問に追記するか、閉じてからそれを踏まえた質問してください・https://teratail.com/questions/iublxlwr18e3ng ・https://teratail.com/questions/iuj5pqti09hc5i

回答2件

javascript
1<style>
2[data-invalid]:invalid{border:solid 1px red;}
3</style>
4<script>
5document.addEventListener('blur',e=>{
6  const t=e.target;
7  if(t instanceof HTMLElement && t.closest('[required]')){
8    t.dataset.invalid='1';
9  }
10},true);
11document.addEventListener('invalid',e=>{
12  const t=e.target;
13  t.dataset.invalid='1';
14},true);
15document.addEventListener('reset',e=>{
16  const t=e.target;
17  document.querySelectorAll('[data-invalid]').forEach(x=>{
18    delete x.dataset.invalid;
19  });
20});
21</script>
22<div id="main" class="contact">
23<h2>問い合わせフォーム</h2>
24<form>
25<div class="form-item">
26<p>名前：</p>
27<input class="entry-field" type="text" name="name" placeholder="名前を入力してください" required>
28</div>
29<div class="form-item">
30<p>問い合わせ内容：</p>
31<textarea class="entry-field" rows="5" name="inquiry" required></textarea>
32</div>
33<div class="form-item">
34<p>パスワード：</p>
35<input class="entry-field" type="password" name="pass" placeholder="Enteer password." >
36</div>
37<button class="btn-flat-border" type="submit">送信</button>
38<button class="btn-flat-border" type="reset">リセット</button>
39</form>

投稿2022/03/08 00:41

yambejp

総合スコア109931

ベストアンサー

初期状態の赤枠をどうしたいのかちょっとよくわからなかった（せっかく書いてある.entry-field:invalidのご指定を消していいのかどうかわからなかった）ので、ひとまず赤枠でなく背景色をpinkにする例です。

名前が空欄の時はこちら↓でいいと思います。JavaScriptで .emptyを追加し、CSSでその場合に背景色をpinkにしています。
https://jsfiddle.net/7hunxwok/

初期状態の赤枠がご不要なら.entry-field:invalidのご指定を消して、.entry-field.emptyでcolor: red;を指定すればできると思います。

CSS
1.entry-field.empty {background: pink;}

JavaScript
1const submit = document.querySelector('.btn-flat-border[type="submit"]');
2const nameField = document.querySelector('.entry-field[name="name"]');
3
4submit.addEventListener('click', () => {
5  if (!(nameField.value)) {
6      nameField.classList.add('empty');
7  }
8});

投稿2022/03/07 18:46

編集2022/03/07 18:48

nikuatsu

総合スコア175

回答へのコメント

退会済みユーザー

2022/03/08 00:42

ありがとうございます。赤枠に関しましては、最初の状態は赤枠ではないノーマルの状態にして、仮にフォーカスが外れた際に空欄だった場合に赤枠を表示させることが目的になります。文字が入力されている場合は赤枠表示は不要です。「.entry-field:invalid」は今回の問題点の解決につながるのであれば修正も可能です。

15分調べてもわからないことは
teratailで質問しよう！