कस्टम HTML5 आवश्यक फ़ील्ड सत्यापन संदेश सेट करें

Question

आवश्यक फ़ील्ड कस्टम सत्यापन

मेरे पास कई इनपुट फ़ील्ड के साथ एक फ़ॉर्म है। मैंने html5 सत्यापन रखे हैं

<input type="text" name="topicName" id="topicName" required />

जब मैं इस टेक्स्टबॉक्स को भरे बिना फॉर्म जमा करता हूं तो यह डिफ़ॉल्ट संदेश दिखाता है जैसे

"Please fill out this field"

क्या कोई इस संदेश को संपादित करने में मेरी मदद कर सकता है?

मेरे पास इसे संपादित करने के लिए एक जावास्क्रिप्ट कोड है, लेकिन यह काम नहीं कर रहा है

$(document).ready(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter Room Topic Title");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

ईमेल कस्टम सत्यापन

मेरे पास HTML फॉर्म है

<form id="myform">
    <input id="email" name="email" type="email" />
    <input type="submit" />
</form>

मान्य संदेश जो मुझे पसंद हैं।

आवश्यक फ़ील्ड: कृपया ईमेल पता दर्ज करें
गलत ईमेल: 'परीक्षण @ .com' एक मान्य ईमेल पता नहीं है। ( यहां, टेक्स्टबॉक्स में प्रदर्शित ईमेल पता दर्ज किया गया है )

मैंने यह कोशिश की है।

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

यह फ़ंक्शन ठीक से काम नहीं कर रहा है, क्या आपके पास ऐसा करने का कोई अन्य तरीका है? सराहना की जाएगी।

Comments

आपका क्या मतलब है 'काम नहीं'? क्या यह कोई त्रुटि दे रहा है? क्रोम के डेवलपर टूल या फ़ायरफ़ॉक्स के फ़ायरबग को खोलें और देखें कि क्या कोई जावास्क्रिप्ट त्रुटि है।

— ओसिरिस

ऐसा करने के लिए कोई और रास्ता नहीं है?

— सुमित बिजवानी

क्या आप अधिक कोड पोस्ट कर सकते हैं? आपने जो पोस्ट किया है वह आपकी मदद करने के लिए पर्याप्त नहीं है। और आप कौन से ब्राउज़र में इसका परीक्षण कर रहे हैं?

— लेवी मोटेलो

@LeviBotelho मैंने पूरे कोड को पोस्ट किया है, और मैं फ़ायरफ़ॉक्स और क्रोम में इसका परीक्षण कर रहा हूं

— सुमित बिजवानी

@SumitBijvani 'बेहतर जवाबों की तलाश' से आपका क्या मतलब है? यदि आप मुझे बताएंगे कि कौन से भाग गलत हैं या पर्याप्त नहीं हैं तो मैं अपना उत्तर बेहतर करूँगा।

— ComFreek

Answer 1

सांकेतिक टुकड़ा

चूँकि इस उत्तर पर बहुत ध्यान गया, यहाँ एक अच्छा विन्यास योग्य स्निपेट है जिसे मैं लेकर आया हूँ:

/**
  * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
  * @link https://stackoverflow.com/a/16069817/603003
  * @license MIT 2013-2015 ComFreek
  * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
  * You MUST retain this license header!
  */
(function (exports) {
    function valOrFunction(val, ctx, args) {
        if (typeof val == "function") {
            return val.apply(ctx, args);
        } else {
            return val;
        }
    }

    function InvalidInputHelper(input, options) {
        input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));

        function changeOrInput() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
                input.setCustomValidity("");
            }
        }

        function invalid() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
               input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
            }
        }

        input.addEventListener("change", changeOrInput);
        input.addEventListener("input", changeOrInput);
        input.addEventListener("invalid", invalid);
    }
    exports.InvalidInputHelper = InvalidInputHelper;
})(window);

प्रयोग

→ jsFiddle

<input id="email" type="email" required="required" />

InvalidInputHelper(document.getElementById("email"), {
  defaultText: "Please enter an email address!",

  emptyText: "Please enter an email address!",

  invalidText: function (input) {
    return 'The email address "' + input.value + '" is invalid!';
  }
});

अधिक जानकारी

• defaultText शुरू में प्रदर्शित किया जाता है
• emptyText इनपुट खाली होने पर प्रदर्शित किया जाता है (साफ़ किया गया था)
• invalidText प्रदर्शित किया जाता है जब इनपुट को ब्राउज़र द्वारा अमान्य के रूप में चिह्नित किया जाता है (उदाहरण के लिए जब यह एक वैध ईमेल पता नहीं है)

आप या तो तीन गुणों में से प्रत्येक को एक स्ट्रिंग या फ़ंक्शन असाइन कर सकते हैं।
यदि आप एक फ़ंक्शन असाइन करते हैं, तो यह इनपुट तत्व (डोम नोड) के संदर्भ को स्वीकार कर सकता है और इसे करना होगा एक स्ट्रिंग वापस जो तब त्रुटि संदेश के रूप में प्रदर्शित होता है।

अनुकूलता

में परीक्षण किया गया:

• क्रोम कैनरी 47.0.2
• IE 11
• Microsoft एज (28/08/2015 तक अद्यतित संस्करण का उपयोग करके)
• फ़ायरफ़ॉक्स 40.0.3
• ओपेरा 31.0

---

पुराना उत्तर

आप यहां पुराना संशोधन देख सकते हैं: https://stackoverflow.com/revisions/16069817/6

Comments

धन्यवाद ... गलत ईमेल के लिए आपका कस्टम सत्यापन काम कर रहा है, लेकिन आवश्यक क्षेत्र के लिए यह मुझे संदेश दिखाता है कि please fill out this fieldक्या आप इस संदेश को बदल सकते हैंPlease enter email address

— सुमित बिजवानी

@SumitBijvani कोई समस्या नहीं है, यह व्यवहार तब होता है क्योंकि हम setCustomValidity()रिक्त ईवेंट के लिए सेटिंग कर रहे हैं , केवल ब्लर ईवेंट के बाद एक बार निकाल दिया गया है, इसलिए हमें इसे केवल DOM लोडिंग पर कॉल करना होगा। अद्यतन उदाहरण / jsFiddle देखें।

— ComFreek

@SumitBijvani मैंने कुछ खामियां भी तय की हैं, मेरी कोड टिप्पणियाँ देखें। बेझिझक सवाल पूछें;)

— ComFreek

अपडेट किए गए jsFiddle के लिए धन्यवाद, सत्यापन ठीक काम कर रहे हैं, लेकिन एक समस्या है जब मैं असली ईमेल पता दर्ज करता हूं, तो सत्यापन भी कहता है, ईमेल पता अमान्य है

— सुमित बिजवानी 23'13

यह बहुत अच्छा काम करता है। मैं चाहता था कि HTML5 "आवश्यक" कार्यक्षमता को भी केवल व्हाट्सएप चार्ट के खिलाफ मान्य किया जाए (जबकि डिफ़ॉल्ट रूप से यह केवल खाली स्ट्रिंग के खिलाफ मान्य होता है)। इसलिए मैंने if (input.value == "") {पढ़ने के बजाय दो पंक्तियों को बदल दिया if (input.value.trim() == "") {- क्या मेरे लिए यह ट्रिक है।

— जज़ा

Answer 2

आप बस इस oninvalid विशेषता का उपयोग करके इसे प्राप्त कर सकते हैं, इस डेमो कोड को चेकआउट कर सकते हैं

<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>
</form>

कोडपेन डेमो: https://codepen.io/akshaykhale1992/pen/yLNvOqP

Comments

lol, हर कोई कोड के पन्नों को फेंक रहा है, मैं बहुत आलसी हूं और मैं इनलाइन वन की तलाश कर रहा था, धन्यवाद @ kakshay khale तुम्हारा जवाब सबसे अच्छा है।

— धीरज थेडिजे

@Thedijje

— अक्षय खले

कृपया ध्यान रखें कि setCustomValidity को कुछ के साथ रीसेट करना होगा oninput="setCustomValidity('')": stackoverflow.com/a/16878766/1729850

— Leia

इस उत्तर को पूरा करने के लिए @Leia धन्यवाद। दुर्भाग्य से रेडियो बटन के लिए काम नहीं करता है। यदि आप एक बटन पर अमान्य ट्रिगर करते हैं, तो कस्टम स्ट्रिंग जोड़ा जाता है। फिर यदि आप एक अलग रेडियो बटन पर क्लिक करते हैं, तो यह पहले एक पर cutomValidity स्ट्रिंग को साफ़ नहीं करेगा। तो ऐसा लगता है कि सभी संबंधित रेडियो बटन पर किसी भी setCustomValidity को सुनने और साफ़ करने के लिए कुछ जावास्क्रिप्ट की आवश्यकता होगी।

— ryan2johnson9

यह स्वीकृत उत्तर होना चाहिए। सरलता सबसे अच्छा उपाय है।

— केनो क्लेटन

Answer 3

HTML:

<form id="myform">
    <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  type="email" required="required" />
    <input type="submit" />
</form>

JAVASCRIPT:

function InvalidMsg(textbox) {
    if (textbox.value == '') {
        textbox.setCustomValidity('Required email address');
    }
    else if (textbox.validity.typeMismatch){{
        textbox.setCustomValidity('please enter a valid email address');
    }
    else {
       textbox.setCustomValidity('');
    }
    return true;
}

डेमो:

http://jsfiddle.net/patelriki13/Sqq8e/

Comments

यह एकमात्र ऐसा है जिसने मेरे लिए काम किया। धन्यवाद, रिकिन।

— बशर गदनफर

मैं अन्य उन्नत दृष्टिकोणों की कोशिश नहीं करना चाहता था। यह एकमात्र सरल था जिसने ईमेल सत्यापन के लिए मेरे लिए काम किया है। धन्यवाद!

— माइकोडिंगप्रोजेक्ट

Answer 4

इसे इस्तेमाल करे:

$(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("Please enter Room Topic Title");
        };
    }
})

मैंने क्रोम और एफएफ में इसका परीक्षण किया और इसने दोनों ब्राउज़रों में काम किया।

Comments

अमीर HTML सामग्री का उपयोग करने का कोई मौका? यह केवल पाठ का समर्थन करता है, कोई टैग नहीं, जैसे कि <b>Error: </b> Incorrect email address।

— .मेगा

जहाँ तक मुझे पता है कि यह अभी तक संभव नहीं है। आप सीएसएस के अनुसार परिणाम को स्टाइल कर सकते हैं, लेकिन निश्चित रूप से इसकी सीमाएं हैं और यह आपके मामले पर लागू नहीं होता है। किसी भी दर पर, प्रौद्योगिकी अभी भी काफी नई है और व्यापक रूप से अधिकांश के लिए पर्याप्त रूप से समर्थित नहीं है, इसलिए मेरी राय में आपका जो भी कार्यान्वयन है, आप अभी भी समय के लिए वैकल्पिक समाधान का उपयोग करके बेहतर हैं।

— लेवी मोटेलो

चलो कभी-कभी कहते हैं (अन्य इनपुट पर निर्भर करता है), मैं ऐसे इनपुट फ़ील्ड के खाली मूल्य की अनुमति देना चाहता हूं। फिर मैं डिफ़ॉल्ट सत्यापन संदेश कैसे बंद कर सकता हूं? असाइन setCustomValidity("")करने से मदद नहीं मिलती है। क्या कुछ अन्य पैरामीटर हैं जिन्हें सेट करने की आवश्यकता है? कृपया सलाह दें।

— .मेगा

Answer 5

यार, मैंने ऐसा कभी नहीं किया है HTML 5 में, लेकिन मैं कोशिश करूँगा। इस बेला पर एक नजर ।

मैंने कुछ jQuery, HTML5 देशी घटनाओं और गुणों और इनपुट टैग पर एक कस्टम विशेषता का उपयोग किया है (यदि आप अपने कोड को मान्य करने का प्रयास करते हैं तो समस्या हो सकती है)। मैंने सभी ब्राउज़रों में परीक्षण नहीं किया, लेकिन मुझे लगता है कि यह काम कर सकता है।

यह jQuery के साथ फ़ील्ड सत्यापन जावास्क्रिप्ट कोड है:

$(document).ready(function()
{
    $('input[required], input[required="required"]').each(function(i, e)
    {
        e.oninput = function(el)
        {
            el.target.setCustomValidity("");

            if (el.target.type == "email")
            {
                if (el.target.validity.patternMismatch)
                {
                    el.target.setCustomValidity("E-mail format invalid.");

                    if (el.target.validity.typeMismatch)
                    {
                         el.target.setCustomValidity("An e-mail address must be given.");
                    }
                }
            }
        };

        e.oninvalid = function(el)
        {
            el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
        };
    });
});

अच्छा लगा। यहाँ सरल रूप html है:

<form method="post" action="" id="validation">
    <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
    <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

    <input type="submit" value="Send it!" />
</form>

विशेषता requiredmessageवह कस्टम विशेषता है जिसके बारे में मैंने बात की थी। आप अपने संदेश को प्रत्येक आवश्यक फ़ील्ड के लिए सेट कर सकते हैं क्योंकि jQuery उस से तब प्राप्त होगा जब वह त्रुटि संदेश प्रदर्शित करेगा। आपको जावास्क्रिप्ट पर प्रत्येक फ़ील्ड को सही सेट करने की आवश्यकता नहीं है, jQuery यह आपके लिए करता है। यह रेगेक्स ठीक लगता है (कम से कम यह आपके ब्लॉक करता हैtesting@.com हाहा को है)

जैसा कि आप फिडल पर देख सकते हैं, मैं सबमिट फॉर्म ईवेंट का एक अतिरिक्त सत्यापन करता हूं ( यह डॉक्यूमेंट पर जाता है। पहले से ही ):

$("#validation").on("submit", function(e)
{
    for (var i = 0; i < e.target.length; i++)
    {
        if (!e.target[i].validity.valid)
        {
            window.alert(e.target.attributes.requiredmessage.value);
            e.target.focus();
            return false;
        }
    }
});

मुझे उम्मीद है कि यह काम करता है या फिर आपकी मदद करता है।

Comments

गैर-मानक विशेषता से बचने के लिए, आप मानक data-उपसर्ग का उपयोग कर सकते हैं ; उदा data-requiredMessage। JQuery के साथ, यह साथ सुलभ है $(element).data('requiredMessage'); मैं अपने सिर के ऊपर से मानक DOM इंटरफ़ेस नहीं जानता।

— IMSoP

@IMSoP यकीन है, यह वैध है!

— DontVoteMeDown

Answer 6

यह मेरे लिए अच्छा काम करता है:

jQuery(document).ready(function($) {
    var intputElements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < intputElements.length; i++) {
        intputElements[i].oninvalid = function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                if (e.target.name == "email") {
                    e.target.setCustomValidity("Please enter a valid email address.");
                } else {
                    e.target.setCustomValidity("Please enter a password.");
                }
            }
        }
    }
});

और जिस रूप में मैं इसका उपयोग कर रहा हूं (छोटा):

<form id="welcome-popup-form" action="authentication" method="POST">
    <input type="hidden" name="signup" value="1">
    <input type="email" name="email" id="welcome-email" placeholder="Email" required></div>
    <input type="password" name="passwd" id="welcome-passwd" placeholder="Password" required>
    <input type="submit" id="submitSignup" name="signup" value="SUBMIT" />
</form>

Answer 7

आप एक ही प्रकार, या सिर्फ एक के सभी इनपुट पर 'अमान्य' के लिए एक इवेंट श्रोता की स्थापना कर सकते हैं, जो आपको आवश्यक है, और फिर उचित संदेश सेट करने पर निर्भर करता है।

[].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
    emailElement.addEventListener('invalid', function() {
        var message = this.value + 'is not a valid email address';
        emailElement.setCustomValidity(message)
    }, false);

    emailElement.addEventListener('input', function() {
        try{emailElement.setCustomValidity('')}catch(e){}
    }, false);
    });

स्क्रिप्ट का दूसरा टुकड़ा, वैधता संदेश रीसेट हो जाएगा, क्योंकि अन्यथा फ़ॉर्म सबमिट करना संभव नहीं होगा: उदाहरण के लिए यह संदेश को ईमेल पते को ठीक करने पर भी ट्रिगर होने से रोकता है।

साथ ही आपको इनपुट फ़ील्ड को आवश्यकतानुसार सेट करने की आवश्यकता नहीं है, क्योंकि इनपुट में टाइप करना शुरू करने के बाद 'अवैध' चालू हो जाएगा।

यहाँ उस के लिए एक पहेली है: http://jsfiddle.net/napy84/U4pB7/2/ आशा है कि मदद करता है!

Answer 8

प्रत्येक इनपुट टैग में विशेषता "शीर्षक" का उपयोग करें और उस पर एक संदेश लिखें

Answer 9

बस तत्व प्राप्त करने और विधि का उपयोग करने की आवश्यकता है।

उदाहरण

var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');

Answer 10

आप बस oninvalid = " विशेषता का उपयोग कर सकते हैं , इस bingding this.setCustomValidity () EventListener के साथ!

यहाँ मेरे डेमो कोड हैं! (आप इसे देख सकते हैं!)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oninvalid</title>
</head>
<body>
    <form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" >
        <input type="email" placeholder="[e-mail]" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

संदर्भ लिंक

http://caniuse.com/#feat=form-validation

https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation

Comments

setCustomValidity ()

— xgqfrms

Answer 11

आप अपना संदेश दिखाने के लिए इस स्क्रिप्ट को जोड़ सकते हैं।

 <script>
     input = document.getElementById("topicName");

            input.addEventListener('invalid', function (e) {
                if(input.validity.valueMissing)
                {
                    e.target.setCustomValidity("Please enter topic name");
                }
//To Remove the sticky error message at end write


            input.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        });

</script>

पैटर्न मिसमैच जैसी अन्य मान्यता के लिए आप अन्य शर्त जोड़ सकते हैं

पसंद

else if (input.validity.patternMismatch) 
{
  e.target.setCustomValidity("Your Message");
}

रेंजऑवरफ्लो, रेंजयूंडरफ्लो, स्टेप मैस्मैच, टाइपमैस्मैच, मान्य जैसी अन्य वैधता शर्तें हैं