フォーカスが外れた時のみ入力フィールドのエラー状態を表示するHTMLの方法

HTML5の標準のバリデーションを使用する方法: HTML5では、<input>要素に対して組み込みのバリデーション機能が提供されています。以下は、バリデーションエラー時にエラーメッセージを表示する例です。

<input type="text" required pattern="[A-Za-z]+" oninvalid="setCustomValidity('英字で入力してください')" oninput="setCustomValidity('')" />

この例では、required属性を使用してフィールドが必須であることを指定し、pattern属性を使用して入力が英字のみであることを指定しています。oninvalid属性とoninput属性は、カスタムのバリデーションメッセージを設定するために使用されます。

JavaScriptを使用する方法: JavaScriptを使用して、フォーカスが外れた時にフィールドの値をチェックし、エラーメッセージを表示する方法もあります。以下は、JavaScriptを使用した例です。

<input type="text" id="myInput" />
<span id="error" style="color: red; display: none;">英字で入力してください</span>
<script>
  const input = document.getElementById('myInput');
  const error = document.getElementById('error');
  input.addEventListener('blur', () => {
    if (!/^[A-Za-z]+$/.test(input.value)) {
      error.style.display = 'inline';
    } else {
      error.style.display = 'none';
    }
  });
</script>

この例では、blurイベントを使用してフォーカスが外れた時に入力値をチェックし、エラーメッセージを表示しています。

CSSの:invalid疑似クラスを使用する方法: CSSの:invalid疑似クラスを使用して、バリデーションエラー時にスタイルを適用する方法もあります。以下は、CSSを使用した例です。

<style>
  input:invalid {
    border: 1px solid red;
  }
</style>
<input type="text" pattern="[A-Za-z]+" />

この例では、pattern属性を使用して入力が英字のみであることを指定しています。:invalid疑似クラスを使用することで、バリデーションエラー時に赤い境界線が表示されます。

これらはいくつかの方法の一部ですが、HTMLとCSS、またはJavaScriptのどれかを使用して、フォーカスが外れた時のみ入力フィールドのエラー状態を表示することができます。必要に応じて、これらの例をカスタマイズして使用してください。