作成したJavascript検証フレームワークがあり、それにHTML5検証を追加しようとしています。data-
私のフレームワークでは、検証は、属性を使用してvalidation-constraintsを要素にバインドすることによって実行されます。これは、、、などrequired
の属性を使用してHTML5検証を行う方法と多少似ています。min
max
現在、2つの問題があります。そうですね、必ずしも問題ではないかもしれませんが、どうすればいいのかを判断できるように、状況をよく理解していただきたいと思います。
私が持っている最初の問題は、要素の値が要素のタイプと一致しない場合にelement.validity.typeMismatch
設定されます。true
たとえば、要素に無効なURL値がある場合、type="url"
または要素に無効なメールがある場合ですtype="email"
。ただし、この動作は、のようなものでは一貫性がありませんtype="number"
。動作に一貫性がない理由は、ブラウザーが(UIまたはDOMを介して)withに無効な値を追加できないためです。このため、に設定されることはなく、常に。を返します。この動作は、無効な値を入力できる場所での動作と矛盾しています。input
type="number"
element.validity.typeMismatch
true
element.checkValidity()
true
type="url"
type="email"
element.validity.typeMismatch
element.checkValidity()
期待値を返します。
の使用についても同様の問題がありmaxlength
ます。にというValidityState
プロパティがあります。*の値よりも長い値を入力することはできないため、ブラウザから直接操作する場合、この値が設定されることはないようです。さらに、DOMからの値よりも長い値を設定できたとしても、この場合も、に設定されることはありません。それで、多かれ少なかれ役に立たないのに、なぜこのプロパティがそこにあるのか疑問に思います。tooLong
element.validity.tooLong
true
input
maxlength
maxlength
element.validity.tooLong
true
現在、HTML5検証はこれらの制約でどのように動作すると予想されますか?ブラウザが無効な値を入力できない場合、これらの制約違反に対してエラーメッセージを生成するにはどうすればよいですか?