HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで要素が無効なときにスクリプトを実行する方法｜oninvalid属性の使い方

HTMLでフォームの要素が無効（バリデーションエラー）になったときにスクリプトを実行したい場合は、oninvalid属性を使用します。

oninvalid属性とは？

oninvalidは、入力フィールドの値が検証ルールを満たさなかった場合に発火するイベント属性です。例えば、required属性が指定された入力欄が空のままフォームを送信しようとしたときなどに、アラート表示やカスタムメッセージの処理をJavaScriptで実行できます。

サンプルコード

以下のコードでは、学生IDの入力欄が空のまま送信ボタンが押されたときに、oninvalid属性によって警告メッセージを表示します。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML oninvalid属性の例</title>
   </head>
   <body>
      <h2>ID</h2>
      <form action = "/new.php">
         <input type = "text" placeholder = "Student ID" name = "sname" oninvalid = "alert('先に入力してください！')" required /><br>
         <input type = "submit" value = "送信">
      </form>
   </body>
</html>

動作のポイント

  • 入力欄にrequired属性を付けることで、空のまま送信した際に「無効」状態と判定されます。
  • その瞬間にoninvalid属性内のJavaScript（ここではalert()）が実行され、ユーザーに通知できます。
  • 主要なブラウザ（Chrome・Firefox・Edge・Safariなど）でサポートされているため、特別なライブラリなしで手軽に使えます。

このようにoninvalid属性を活用すれば、HTMLの標準機能だけで入力チェック時の独自処理を簡単に追加できます。

  1. HTMLで要素がクリックされたときにスクリプトを実行する方法（onclick属性の使い方）

    HTMLで要素がクリックされたときにスクリプトを実行したい場合は、onclick属性を使用します。この属性をボタンやリンクなどの要素に追加することで、クリックの瞬間に任意のJavaScript関数を呼び出すことができます。onclick属性の基本構文onclick属性には、クリック時に実行したいJavaScriptのコードや関数名を指定します。以下が基本的な書き方です。<要素名 onclick = 実行したい関数名()>テキスト</要素名>実装例以下のコードでは、ボタンがクリックされるとdisplay()関数が呼び出され、指定したidの段落にメッセージが表示されます。実

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実