HTML インタラクティブ フォーム検証

HTML でフォームを作成するのは常に少し複雑です。まず HTML マークアップを正しく記述する必要があります。次に、送信する前に各フォーム項目に使用可能な値があることを確認する必要があります。最後に、問題が発生した場合にユーザーに警告する必要があります。

幸いなことに、HTML5 には、このタスクをはるかに簡単にするいくつかの新機能が導入されています。特に、フォーム コントロールは制約をサポートするように拡張され、ブラウザーが JavaScript を使用せずにクライアント側でフォーム コンテンツを検証できるようになりました。

WebKit はすでに部分的にサポートされています。フォーム コントロールのプロパティを使用して制約を記述し、JavaScript で checkValidity() API を使用してフォーム コントロールとフォーム入力全体の有効性をクエリできるようになりました。 ValidityState API を使用して、どの制約に違反したかを把握することもできます。

ただし、WebKit は以前は対話型 HTML フォーム検証をサポートしていませんでした。対話型 HTML フォーム検証は、フォームが送信されたとき (

要素に novalidate 属性が設定されている場合を除く)、または reportValidity() API を使用したときに発生します。さらに、Webkit がこれをサポートし、Safari Technology Preview 19 でこの機能が有効になったことを発表できることを嬉しく思います。インタラクティブなフォーム検証により、WebKit はフォーム内のすべてのフォーム コントロールを検証するようになりました。フォーム コントロールが 1 つでも制約に違反している場合、WebKit は最初のフォーム コントロールに入力フォーカスを置き、インターフェイス ページをスクロールしてコントロールを表示し、その横に問題を説明するバブル メッセージを表示します。

検証の制約

入力タイプ

一部の入力タイプには固有の制約があります。タイプが「電子メール」、「番号」または「URL」に設定されている場合、入力された値が有効な電子メール アドレス、番号、または URL であるかどうかが自動的にチェックされます。例:

<input type="email">

属性を確認します

次のプロパティを使用して、フォーム コントロールの制約を記述することができます:

• required: 値を入力する必要があることをユーザーに伝えます。

• 
  

• pattern="[a-z]": 指定された JavaScript 正規表現に一致する値を入力する必要があることをユーザーに伝えます。

• 
  

• minlength=x: 少なくとも x 文字の値を入力する必要があることをユーザーに伝えます。

• 
  

• maxlength=y: 最大 x 文字の値を入力する必要があることをユーザーに伝えます。

• 
  

• min=x: x 以上の値を入力する必要があることをユーザーに伝えます。 。

• 
  

• max=y: y 以下の値を入力する必要があることをユーザーに伝えます。

• 
  

• step=x: 最小値に x の倍数を加えた値に基づいて値を入力する必要があることをユーザーに伝えます。

制約の検証

制約検証は、次の集中的な方法でトリガーできます:

• checkValidity() は、フォーム要素または特定のフォーム コントロールに対して呼び出すことができます。制約に違反すると、このメソッドは false を返します。同時に、制約に違反する要素に対して「無効」と呼ばれるイベントもトリガーされます。フォーム コントロールの "validity" プロパティを通じて公開される ValidityState オブジェクトを使用して、どの制約に違反したかを確認できます。

• 
  

• reportValidity() は、フォーム制約または特定のフォーム コントロールに対して呼び出すことができます。これにより、制約の対話型検証がトリガーされます。さらに、checkValidity() と reportValidity() は、制約違反がチェックされた最初の要素に入力フォーカスを置き、その横に問題を説明するバブル メッセージを表示します。

• 
  

• 要素に「novalidate」属性が設定されていない限り、フォームの送信時に対話型フォーム検証も行われます。

カスタム制約

検証に JavaScript を使用し、setCustomValidity() API を活用することで、より複雑な検証制約を実装したり、制約に違反する入力に対してより有用なエラー メッセージを提供したりできます。

JavaScript は、フォーム コントロール上の特定のイベント (例: onchange、oninput など) をリッスンすることによってトリガーできます。実行された JavaScript コードはフォーム コントロールのデータを検証し、setCustomValidity() を使用してコントロールのエラー メッセージを更新します:

<label for="feeling">Feeling:</label>
<input id="feeling" type="text" oninput="validateFeeling(this)">
<script>
 function validateFeeling(input) {
   if (input.value == "good" || input.value == "fine" || input.value == "tired") {
     input.setCustomValidity(&#39;"&#39; + input.value + &#39;" is not a feeling&#39;);
   } else {
     // The data is valid, reset the error message.
     input.setCustomValidity(&#39;&#39;);
   }
 }
</script>

確認メッセージのバブルプロンプト

インタラクティブなフォーム検証を実行すると、次のように、制約に違反していることが検証されたデータを持つ最初のフォーム コントロールの横に、問題を説明するバブル プロンプトが表示されます。

一部のローカライズされた検証メッセージは、特定の制約に対してデフォルトで設定されています。検証メッセージをカスタマイズしたい場合は、setCustomValidity() API の使用を検討してください。 WebKit は JavaScript の国際化 API もサポートしているので、カスタム検証メッセージのローカライズに役立ちます。

まとめ

HTML インタラクティブ フォーム検証が Webkit でサポートされるようになり、Safari Technology Preview 19 で有効になります。この機能を体験するには、オンライン デモをお試しください。バグの報告も大歓迎です。

以上がHTML インタラクティブ フォーム検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。