このサンプルでは、required 属性と pattern 属性でのエラー結果のメッセージをカスタマイズしています。また、JavaScript のイベント部分の登録には jQuery を使用しています。 validity の下には以下のようなプロパティがあり(Google Chrome 調べ)、個別に対応が可能なようです。 badInput customError patternMismatch rangeOverflow rangeUnderflow stepMismatch tooLong tooShort typeMismatch valid valueMissing ※ 実践しないと詳細は解りませんが、だいたいの意味は MDN で日本語で書かれています。customError だけは特殊なプロパティのようで、invalid イベントの中で、setCustomValidity を実行して空文字以外を指定していると true になるようです。 しかも、実行順序とか関係無く、記述されていると invalid の中ではそうなっていました▼ 何もカスタマイズしないで、デフォルトエラー発生後、コンソールで確認したものです。 required 属性の場合は、未入力だと valueMissing になり、pattern の対象外だと、patternMismatch になりました。詳細は未調査ですが、思ったような対応はおそらく可能だと思います。 ▼ 参考にした Stack Overflow HTML5 form required attribute. Set custom validation message? Stack Overflow でも書かれていますが、oninput での処理が重要となります。(そもそも、この手の validate 処理は、業務アプリでは重要になります。やっと、HTML でそれがサポートされるようにはなりましたが、結果的には JavaScript の力を借りる事は避けられないようです。)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
$("#mydata")
.on("invalid", function(e){
if ( e.currentTarget.validity.valueMissing ) {
this.setCustomValidity("必須入力です");
}
if ( e.currentTarget.validity.patternMismatch ) {
this.setCustomValidity("数値を入力して下さい");
}
})
.on("input",function(){
this.blur();
this.setCustomValidity("");
this.focus();
});
});
</script>
<form
action="http://winofsql.jp/php_get.php"
target="myframe1"
accept-charset="utf-8">
<input
type="text"
id="mydata"
name="mydata"
required
pattern="[0-9]+">
<input type="submit" name="send" value="送信">
</form>
<iframe
name="myframe1"
frameborder="1"
scrolling="yes"
width="100%" height="100"
style="margin-top:10px;">
</iframe>
oninput で setCustomValidity("") でカスタムメッセージをクリアしているのは、例えば、required だけメッセージを変更していた場合、setCustomValidity("") でクリアしなければ、pattern のエラーになっているにもかかわらず 『必須入力です』 と表示されてしまいます。
そこで、setCustomValidity("") でクリアだけ実行すると、 『必須入力です』 というメッセージが表示されている状態のままで数字以外を入力すると、 『デフォルトのpattern のエラーメッセージ』 が表示されますい。これが、required のカスタマイズだけなら正しいのですが、pattern のメッセージもカスタマイズしている場合に新しいメッセージに切り替わりません。
そこで、いったんフォーカスを外して現在の表示をキャンセルして setCustomValidity("") でカスタムメッセージをクリアして、フォーカスを戻すという処理を行っています
textarea で pattern 属性は使用できません
( MDN のドキュメント )
関連する記事
HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
|
|
【JavaScriptの最新記事】
- Replit : js-web-speech
- JavaScript の論理和(||) による『無かった場合の値の代入』/ expr1 || expr2 は expr1 を false と見ることができる場合は expr2 を返します
- Seesaa の記事に下の『最新の同カテゴリのリスト』のリンクの最後に付く ?seesaa_related=category を削除する方法
- JavaScript : ブラウザ判定( IE11 対応 ) / edge を追加
- JavaScript : 入力文字列を 変数用16進数表現 に変換する
- JavaScript : 入力文字列を htmlentity に変換する
- HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
- テーブルのセルをクリックして背景色を rgb(0,0,0) から #000000 の変換で、eval を使う事の考察
- JavaScript & VBScript : ブラウザから Windows の OS のバージョンを判定
- Firefox、IE11 の canvas で動作する楕円( ellipse )関数
- 文字列を UTF-8(２バイト以上) で表現した時の 16進数表現の文字列を取得する
- ブログで jQuery を使用するのに、全ての記事で使うわけでは無いので、記事毎でロードする
- JavaScript による２会話アプリケーションのコントロール(2)
- JavaScript による２会話アプリケーションのコントロール(1)
- JavaScript : Global な undefined 変数に絡むいろいろ
- 簡易縦書き変換
- ブラウザの WebGL チェック : jQuery 名前空間へ変数($.is_webgl)追加
- JSONP の原理と、簡単な利用方法の実際のコード( 実装は jQuery が良いですが、Access-Control-Allow-Origin: * のほうが楽だし読込み先を制限できます )
- document.createElement("a") で新しいウインドウ(タブ)を開く
- JavaScript と VBScript のカラーコード(#RRGGBB)の文字列と数値間の相互変換
