フォーカス、入力完了時に空欄だった場合に入力欄に赤枠をつける処理

HTMLに記載されている、「名前」「問い合わせ内容」「パスワード」において、入力が完了、もしくはフォーカスから外れた時に空欄だった場合に入力欄の枠を赤枠に自動的に切り替える処理のやり方をご教授いただきたいです。

～実際に試したこと～
・下記のように作成は出来ていますが、入力完了時やフォーカスが外れた時に空欄だった場合に赤枠になる処理が出来ません。
・JavaScriptに記載されているのをHTMLに入力すると赤枠になりはしますが、今回JSにてその処理を作成したいです。
・「HTML」にて「required」、CSSにて「.entry-field:invalid{border: solid 1px red;}」は試していますが、これだと最初から赤枠になってしまうのでこれではダメです。

CSS
[ name="contact" ] h3 {
  font-size: inherit;
  font-weight: inherit;
}
[ name="contact" ] h3:after {
  content: ": ";
}
[ name="contact" ] .empty {
  border-color: #f00;
}
.entry-field:invalid{border: solid 1px red;}

JavaScriot
[ "name", "inquiry", "pass" ].forEach( name =>
    document.contact[ name ].onblur = function(){
    this.classList[ this.value.length ? "remove" : "add" ]( "empty" );
    } );

HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="js/sample.js"></script>
  </head>
  <body class="back-gray">
    <header>
    </header>
    <div id="main" class="contact">
      <h2>問い合わせフォーム</h2>
      <form name ="contact">
        
        <div class="form-item">
          <h3>名前：</h3>
          <input class="entry-field" type="text" name="name" placeholder="名前を入力してください" >
        </div>
        
        <div class="form-item">
          <h3>問い合わせ内容：</h3>
          <textarea class="entry-field" rows="5" name="inquiry" ></textarea>
        </div>
        
        <div class="form-item">
          <h3>パスワード：</h3>
          <input class="entry-field" type="password" placeholder="Enteer password." name="pass" >
        </div>

        <div class="form-item">
          <p>性別：</p>
          <label>
            <input type="radio" name="gender" value="man" checked>男
          </label>
          <label>
            <input type="radio" name="gender" value="woman">女
          </label>
        </div>
  
        <div class="form-item">
          <p>問い合わせ区分：</p>
          <label>
            <input type="checkbox" name="division" value="1" checked>事業内容
          </label>
          <label>
            <input type="checkbox" name="division" value="2">採用応募
          </label>
          <label>
            <input type="checkbox" name="division" value="3">その他
          </label>
        </div>
  
        <div class="form-item">
          <p>地域：</p>
          <select name="place"  class="entry-field">
            <option value="1">北海道</option>
            <option value="2">東北</option>
            <option value="3" selected>関東</option>
            <option value="4">中部</option>
            <option value="5">近畿</option>
            <option value="6">中国</option>
            <option value="7">四国</option>
            <option value="8">九州</option>
          </select>
        </div>
  
        <p></p>
        <button class="btn-flat-border" type="submit">送信</button>
        <button class="btn-flat-border" type="reset">リセット</button>
      </form>

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

行動規範の内容に同意します

回答1件

ベストアンサー

JSとCSSを自由につかっていいならこんな感じ
ようは最初のblur時に適当な属性をつけてしまう

javascript
1<style>
2[data-required]: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.setAttribute('data-required','1');
9  }
10},true);
11</script>
12required:<input type="text" required><br>
13required:<input type="text" required><br>
14required:<input type="text" required><br>
15none-required:<input type="text">