web-dev-qa-db-ja.com

HTML5フォーム検証のデフォルトエラーメッセージを変更または削除するにはどうすればよいですか？

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

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

Ankurの回答にバグを見つけましたが、この修正で修正しました：

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

無効な入力データを設定し、入力を修正してフォームを送信したときに見られるバグ。おっとっと！これはできません。 firefoxとchromeでテストしました

204
Mahoor13

Pattern =を使用すると、タイトルattribに入力したものがすべて表示されるため、JSを実行する必要はありません。

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
90
HTF
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

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

32
Ankur Loriya

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

$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});
14
Luca Fagioli

HTML：

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />

JAVASCRIPT：

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Fiddle Demo

14
Rikin Patel

次の手順でこのアラートを削除できます。

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

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

13
user3894381

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

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

11
albert

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

var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };
5
kta

Mahoor13の回答にバグを見つけました。ループで動作していないため、この修正で修正しました。

HTML：

<input type="email" id="eid" name="email_field" oninput="check(this)">

Javascript：

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something Nice!!");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}

完全にループで実行されます。

3
Darshan Gorasia

偶然に道を見つけました：これを使用する必要がある場合があります：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/>
2
Mohammad Shojaa

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

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

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

2
Abibullah Rahamathulah

あなたがここで見ることができるように：

入力フィールドを修正した後、html5 oninvalidは機能しません

エラーを修正するときは警告メッセージを消してください。

<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />
2
Jonathan Machado

これはChromeで私の仕事です

    <input type="text" name="product_title" class="form-control" 
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')"
0
Sahan Pasindu Nirmal

単純に<form>タグから「novalidate」を使用できます

詳細はここをクリック

0
sadeq qane

HTML 5検証用にカスタムエラーメッセージを設定するには、

oninvalid="this.setCustomValidity('Your custom message goes here.')"

ユーザーが有効なデータ使用を入力したときにこのメッセージを削除するには、

onkeyup="setCustomValidity('')"

これがあなたのために働くことを願っています。楽しい ;）

0
Umesh Patil