मैं HTML5 फॉर्म सत्यापन डिफ़ॉल्ट त्रुटि संदेशों को कैसे बदल या हटा सकता हूं?

142

उदाहरण के लिए मैंने ए textfield। फ़ील्ड अनिवार्य है, केवल संख्याएँ आवश्यक हैं और मान की लंबाई 10. होनी चाहिए। जब ​​मैं मान के साथ फ़ॉर्म सबमिट करने का प्रयास करता हूँ, जिसकी लंबाई 5 है, तो डिफ़ॉल्ट त्रुटि संदेश प्रकट होता है:Please match the requested format 

<input type="text" required="" pattern="[0-9]{10}" value="">
  1. मैं HTML 5 फॉर्म सत्यापन त्रुटियों को डिफ़ॉल्ट संदेशों को कैसे बदल सकता हूं?
  2. यदि 1 अंक हो सकता है, तो क्या कुछ संपत्ति फ़ाइलों को बनाने और उस फ़ाइलों में सेट करने का एक तरीका है कस्टम त्रुटि संदेश?
html  validation 
— emilan
स्रोत
1
मुझे Mahoor13 उत्तर पर एक बग मिला, यह लूप में काम नहीं कर रहा है इसलिए मैंने इसे ठीक कर दिया है और कुछ सुधार के साथ उत्तर दे रहा हूं, जिसे आप उत्तर अनुभाग के तहत पा सकते हैं। यहाँ लिंक stackoverflow.com/questions/10361460/…
— दर्शन गोरसिया

जवाबों:

213

मुझे अंकुर के जवाब पर एक बग मिला और मैंने इसे इस सुधार के साथ तय किया है:

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

बग तब देखा जाता है जब आप एक अमान्य इनपुट डेटा सेट करते हैं, फिर इनपुट को सही करें और फ़ॉर्म भेजें। उफ़! आप ऐसा नहीं कर सकते। मैंने इसे फ़ायरफ़ॉक्स और क्रोम पर परीक्षण किया है

— Mahoor13
स्रोत
18
मैं इनलाइन घटनाओं का उपयोग करने के खिलाफ सुझाव देता हूं। यह एक अच्छा अभ्यास नहीं है।
— जारेड
2
@ Mahoor13 मैंने इसे उसी के समान लिखा है, लेकिन यह कभी मान्य नहीं होता है। क्या आप एक संकेत दे सकते हैं? jsfiddle.net/2USxy
— सलीक
1
एक कस्टम फ़ायरफ़ॉक्स प्रॉपर्टी भी है जिसे आप अच्छी तरह से जोड़ सकते हैं: x-moz-irormessage = "कृपया केवल संख्याएँ दर्ज करें"
— coliff
4
इनपुट के वैध होने या न होने पर प्रभावी ढंग से देखने के लिए "onchange" के बजाय "onkeyup" का उपयोग करना बेहतर है।
— जाम विले
4
इसमें निम्न समस्या है (कम से कम Chrome 55 में): जब अमान्य संदेश पॉप हो जाता है, यदि उपयोगकर्ता अमान्य फ़ील्ड में (बिना क्लिक किए) फ़ोकस रखता है और उस फ़ील्ड को संपादित करता है जो संदेश पॉप-आउट होता रहता है - तब भी जब फ़ील्ड मान्य है - यह या तो ध्यान केंद्रित करना या जमा को ट्रिगर करना आवश्यक है।
— leonbloy
96

पैटर्न का उपयोग करते समय = यह आप जो भी शीर्षक अट्रिब्यूट में डालेंगे, वह प्रदर्शित करेगा, इसलिए जेएस की आवश्यकता नहीं है:

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
— HTF
स्रोत
9
बहुत अच्छा जवाब। लेकिन HTML5 सभी चीजों के साथ, विश्वसनीयता ब्राउज़र पर निर्भर करती है। इस समाधान ने एफएफ 15 और क्रोम 22 के साथ बहुत अच्छा काम किया, लेकिन सफारी 5 के साथ नहीं (ओएस एक्स लायन के साथ परीक्षण)
— james.garriss
1
अच्छा जवाब, लेकिन यहां पिछड़े (या यहां तक ​​कि वर्तमान) संगतता के बारे में सावधान रहें।
— बोहनी
7
जब मैंने "फू" के लिए एक शीर्षक सेट किया, तो मुझे "कृपया अनुरोधित प्रारूप मेल करें। फू", इसलिए यह मेरे लिए काम नहीं करेगा
— डैन
7
शीर्षक का उपयोग माउस होवर पर टूलटिप पाठ के रूप में भी किया जाता है, इसलिए मैं इस दृष्टिकोण से दूर रहूंगा।
— fotijr
2
शीर्षक का उपयोग माउस होवर पर टूलटिप पाठ के रूप में भी किया जाता है, इसलिए यह संभवतः सबसे अच्छा तरीका है।
— OdraEncoded
35 
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

मुझे यह कोड दूसरी पोस्ट में मिला।

— अंकुर लोरिया
स्रोत
धन्यवाद, यह मेरे लिए काम किया। हालाँकि मुझे इस बारे में पोस्ट या ब्लॉग या साइट नहीं मिली।
— user219628
1
निम्नलिखित पोस्ट पर ध्यान दें जब setCustomValitidy stackoverflow.com/questions/16867407/…
— Konstantinos Chertouras
15

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

ब्राउज़र सत्यापन संदेश को आपके दस्तावेज़ में दिखने से रोकने के लिए, jQuery के साथ:

$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});
— लुका फागियोली
स्रोत
13

आप निम्न करके इस चेतावनी को हटा सकते हैं:

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

कस्टम संदेश को केवल एक रिक्त स्थान पर सेट करें

— user3894381
स्रोत
11

आप उन्हें बाधा सत्यापन एपी के माध्यम से बदल सकते हैं: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

यदि आप एक आसान समाधान चाहते हैं, तो आप civem.js, कस्टम इनपुट सत्यापन त्रुटि संदेश जावास्क्रिप्ट को रॉक कर सकते हैं यहाँ डाउनलोड करें: https://github.com/javanto/civem.js यहाँ लाइव डेमो: http://jsfiddle.net/ hleinone / njSbH /

— अल्बर्ट
स्रोत
5

SetCustomValidity आपको डिफ़ॉल्ट सत्यापन संदेश को बदलने देती है। यह कैसे उपयोग करना है इसका एक सरल उदाहरण है।

var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };
— KTA
स्रोत
3

मुझे एक रास्ता मिला है अब संयोग से: आपको इसका उपयोग करने की आवश्यकता हो सकती है: डेटा-त्रुटि: "" 

<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/>
— मोहम्मद शोजा
स्रोत
3

मुझे Mahoor13 उत्तर पर एक बग मिला, यह लूप में काम नहीं कर रहा है, इसलिए मैंने इसे इस सुधार के साथ तय किया है:

HTML:

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

जावास्क्रिप्ट:

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

यह पूरी तरह से लूप में चल रहा है।

— दर्शन गोरसिया
स्रोत
2

जैसा कि आप यहाँ देख सकते हैं:

html5 oninvalid इनपुट क्षेत्र तय करने के बाद काम नहीं करता है

जब आप त्रुटि को ठीक कर लेते हैं, तो आपको उस तरह से रखना अच्छा होता है, जब आप चेतावनी संदेश को गायब कर देते हैं।

<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />
— जोनाथन मचाडो
स्रोत
2

HTML 5 सत्यापन उपयोग के लिए कस्टम त्रुटि संदेश सेट करने के लिए,

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

और इस संदेश को हटाने के लिए जब उपयोगकर्ता वैध डेटा उपयोग में प्रवेश करता है,

onkeyup="setCustomValidity('')"

उम्मीद है इससे आपका काम बनेगा। का आनंद लें ;)

— उमेश पाटिल
स्रोत
0

क्रोम में मेरे लिए यह काम है 

    <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')"
— सहज पसिंधु निर्मल
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.