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

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

<input type="text" required="" pattern="[0-9]{10}" value="">

1. HTML 5フォーム検証エラーのデフォルトメッセージを変更するにはどうすればよいですか？
2. 最初のポイントを実行できる場合、プロパティファイルをいくつか作成し、そのファイルにカスタムエラーメッセージを設定する方法はありますか？

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

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

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

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

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />

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

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

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

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

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

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

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

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

制約検証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/ hleinone / njSbH /

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

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

誤って方法を見つけました。これを使用する必要があります：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/>

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("");  
    }                 
}  

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

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

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

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

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

入力フィールドを修正した後、html5 oninvalidが機能しない

エラーを修正すると警告メッセージが消えるので、そのように置くのは良いことです。

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

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

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

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

onkeyup="setCustomValidity('')"

これがうまくいくことを願っています。楽しい ;）

これは私にとって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')"

<form>タグに「novalidate」を使用するだけです

詳細はこちらをクリックしてください