जावास्क्रिप्ट फ़ंक्शन से मैन्युअल रूप से HTML5 सत्यापन संदेश कैसे दिखाएं?

Question

मैं जानना चाहता हूं कि जावास्क्रिप्ट फ़ंक्शन का उपयोग करके प्रोग्रामेटिक रूप से HTML5 सत्यापन त्रुटि दिखाने का कोई तरीका है या नहीं।

यह उन परिदृश्यों के लिए उपयोगी है जहां ईमेल डुप्लिकेशन की जांच की जानी चाहिए। उदाहरण के लिए, कोई व्यक्ति ईमेल में प्रवेश करता है, सबमिट बटन दबाता है, और फिर उसे सूचित किया जाना चाहिए कि यह ईमेल पहले ही पंजीकृत है या कुछ।

मुझे पता है कि ऐसी त्रुटि दिखाने के अन्य तरीके हैं, लेकिन मैं इसे उसी तरह प्रदर्शित करना चाहता था जैसे सत्यापन त्रुटि संदेश दिखाए जाते हैं (उदा। अवैध ईमेल, खाली फ़ील्ड, आदि)।

JSFiddle:http://jsfiddle.net/ahmadka/tjXG3/

HTML फ़ॉर्म:

<form> 
    <input type="email" id="email" placeholder="Enter your email here..." required> 
    <button type="submit">Submit</button> 
</form> 

<button id="triggerMsg" onclick="triggerCustomMsg()">Trigger Custom Message</button> 

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

function triggerCustomMsg() 
{ 
    document.getElementById("email").setCustomValidity("This email is already used"); 

} 

ऊपर कोड कस्टम संदेश सेट है, लेकिन इसके अपने आप नहीं दिखाए। यह केवल तभी दिखाया जाता है जब व्यक्ति सबमिट बटन या कुछ दबाता है।

Answer 1

यह सवाल एक साल पहले कहा गया था, लेकिन यह एक अच्छा सवाल है कि मैं हाल ही में रूप में अच्छी तरह का सामना करना पड़ा है ...

मेरे समाधान जावास्क्रिप्ट का उपयोग करने के एक विशेषता बनाने के लिए (मैं के साथ "डेटा-अवैध" चला गया था) <label> प्रत्येक <input>, <select> और <textarea> पर validationMessage युक्त।

फिर कुछ सीएसएस ...

label:after { 
    content: attr(data-invalid); 
    ... 
} 

... प्रदर्शित करता है त्रुटि संदेश।

सीमाएं

यह केवल प्रत्येक तत्व प्रदान की काम करता है एक लेबल है। यदि आप तत्व पर विशेषता डालते हैं तो यह काम नहीं करेगा, क्योंकि <input> तत्वों में :after छद्म तत्व नहीं हो सकते हैं।

डेमो

http://jsfiddle.net/u4ca6kvm/2/

Answer 2

अब आप HTMLFormElement.reportValidity() विधि का उपयोग कर सकते, पल यह क्रोम, फायरफॉक्स, ओपेरा, और Android ब्राउज़र में लागू है, लेकिन इंटरनेट एक्सप्लोरर में अभी तक नहीं या सफारी (एमडीएन में Browser compatibility देखें)। यह सबमिट ईवेंट को ट्रिगर किए बिना वैधता त्रुटियों की रिपोर्ट करता है और वे उसी तरह दिखाए जाते हैं।

Answer 3

जैसा कि @ डिएगो द्वारा निर्देशित किया गया है, आप form.reportValidity() का उपयोग कर सकते हैं;
आईई समर्थन करने के लिए और सफारी इस polyfill शामिल है, यह सिर्फ काम करता है:

if (!HTMLFormElement.prototype.reportValidity) { 
    HTMLFormElement.prototype.reportValidity = function() { 
     if (this.checkValidity()) return true; 
     var btn = document.createElement('button'); 
     this.appendChild(btn); 
     btn.click(); 
     this.removeChild(btn); 
     return false; 
    } 
}