158

たとえば、私はtextfield. フィールドは必須です。数値のみが必要で、値の長さは 10 でなければなりません。長さが 5 の値でフォームを送信しようとすると、デフォルトのエラー メッセージが表示されます。Please match the requested format 

<input type="text" required="" pattern="[0-9]{10}" value="">
  1. HTML 5 フォーム検証エラーのデフォルト メッセージを変更するにはどうすればよいですか?
  2. 最初のポイントを実行できる場合、いくつかのプロパティ ファイルを作成し、そのファイルにカスタム エラー メッセージを設定する方法はありますか?
4

15 に答える 15

232

これは JavaScript ソリューションです。

 <input type="text"
    pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Please enter Alphabets.')"
    onchange="try{setCustomValidity('')}catch(e){}" />

「onchange」イベントは、無効な入力データを設定し、入力を修正してフォームを再送信する場合に必要です。Firefox、Chrome、Safari でテストしました。

ただし、最新のブラウザの場合:

最新のブラウザーでは、検証に JavaScript は必要ありませんでした。次のようにしてください：

<input type="text"
    pattern="[a-zA-Z]+"
    title="Please enter Alphabets."
    required="" />
于 2012-09-11T07:02:52.383 に答える
106

pattern= を使用すると、タイトル属性に入力したものが表示されるため、JS は必要ありません。

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
于 2012-10-08T19:23:44.113 に答える
38 
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

このコードは別の投稿で見つかりました。

于 2012-04-28T11:56:37.673 に答える
14

jQuery を使用して、ブラウザ検証メッセージがドキュメントに表示されないようにするには:

$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});
于 2015-05-04T12:39:43.943 に答える
14

次のようにして、このアラートを削除できます。

<input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity(' ')"
/>

カスタムメッセージを1つの空白に設定するだけです

于 2014-07-31T06:32:59.977 に答える
11

制約検証 API を介して変更できます: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

簡単な解決策が必要な場合は、civem.js、カスタム入力検証エラー メッセージ JavaScript lib をここからダウンロードできます: https://github.com/javanto/civem.js ライブ デモはこちら: http://jsfiddle.net/フレイノン/njSbH/

于 2012-04-28T08:40:42.513 に答える
5

私は偶然に方法を見つけました: これを使用する必要があります: data-error:""

<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>
于 2016-09-12T02:49:32.903 に答える
5

setCustomValidity を使用すると、デフォルトの検証メッセージを変更できます。使用方法の簡単な例を次に示します。

var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };
于 2014-01-07T17:05:39.420 に答える
3

これは、html5 検証のさまざまな属性のチェックについて見つけた非常に良いリンクです。

https://dzone.com/articles/custom-validation-messages

それが誰かを助けることを願っています。

于 2015-11-27T13:31:16.047 に答える