কাস্টম HTML5 প্রয়োজনীয় ক্ষেত্রের বৈধতা বার্তা সেট করুন

Question

প্রয়োজনীয় ক্ষেত্রের কাস্টম বৈধতা

অনেক ইনপুট ক্ষেত্র সহ আমার একটি ফর্ম রয়েছে। আমি এইচটিএমএল 5 বৈধতা রেখেছি

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

ইমেল কাস্টম বৈধতা

আমি নিম্নলিখিত এইচটিএমএল ফর্ম আছে

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

আমি চাই বৈধতা বার্তা।

প্রয়োজনীয় ক্ষেত্র: দয়া করে ইমেল ঠিকানা লিখুন
ভুল ইমেল: 'টেস্টিং @। কম' কোনও বৈধ ইমেল ঠিকানা নয়। ( এখানে, পাঠ্যবক্সে প্রদর্শিত ইমেল ঠিকানা প্রদর্শিত )

আমি এই চেষ্টা করেছি।

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

এই ফাংশনটি সঠিকভাবে কাজ করছে না, এটি করার জন্য আপনার অন্য কোনও উপায় আছে? এটি প্রশংসা হবে।

Comments

'কাজ করছে না' বলতে কী বোঝ? এটি একটি ত্রুটি দিচ্ছে? Chrome এর বিকাশকারী সরঞ্জাম বা ফায়ারফক্সের ফায়ারব্যাগ খুলুন এবং দেখুন কোনও জাভাস্ক্রিপ্ট ত্রুটি আছে কিনা।

— ওসিরিস

এটি করার অন্য কোনও উপায় আছে?

— সুমিত বিজানী

আপনি কি আরও কোড পোস্ট করতে পারেন? আপনি যা পোস্ট করেছেন তা আপনাকে সহায়তা করার পক্ষে পর্যাপ্ত নয়। এবং কোন ব্রাউজারে আপনি এটি পরীক্ষা করছেন?

— লেভি বোটেলহো

@ লেভিবোটেলহো আমি পুরো কোড পোস্ট করেছি এবং আমি এটি ফায়ারফক্স এবং ক্রোমে পরীক্ষা করছি

— সুমিত বিজানি

@ সুমিতবিজবানী 'আরও উত্তরের উত্তর খুঁজছেন' এর অর্থ কী? আমি আমার উত্তরটি উন্নত করব যদি আপনি আমাকে বলতেন যে কোন অংশগুলি ভুল / যথেষ্ট নয়।

— কমফ্রিচ

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
• আইই 11
• মাইক্রোসফ্ট এজ (28/08/2015 তারিখে আপ টু ডেট সংস্করণ ব্যবহার করছে)
• ফায়ারফক্স 40.0.3
• অপেরা 31.0

---

পুরানো উত্তর

আপনি এখানে পুরানো সংশোধনী দেখতে পারেন: https://stackoverflow.com/revisions/16069817/6

Comments

ধন্যবাদ ... ভুল ইমেলের জন্য আপনার কাস্টম বৈধতা কাজ করছে তবে, প্রয়োজনীয় ক্ষেত্রের জন্য এটি আমাকে বার্তাটি দেখায় please fill out this fieldআপনি এই বার্তাটি পরিবর্তন করতে পারেনPlease enter email address

— সুমিত বিজানি

@ সুমিতবিজওয়ানি কোনও সমস্যা নেই, আচরণটি ঘটে কারণ আমরা setCustomValidity()খালি ইমেলগুলি সেট করে থাকি কেবল অস্পষ্ট ঘটনাটি একবার চালিয়ে যাওয়ার পরে আমাদের কেবল এটি ডম লোডিংয়েও কল করা দরকার। আপডেট হওয়া উদাহরণ / জেএসফিডাল দেখুন।

— কমফ্রিচ

@ সুমিতবিজবানী আমি কিছু ত্রুটিগুলিও ঠিক করেছি, আমার কোড মন্তব্য দেখুন, দয়া করে। প্রশ্ন জিজ্ঞাসা করুন নির্দ্বিধায়;)

— কমফ্রিচ

আপডেট করা জেএসফিডেলের জন্য ধন্যবাদ, বৈধতা ঠিকঠাক কাজ করছে, তবে আমি যখন সত্যিকারের ইমেল ঠিকানাটি প্রবেশ করি তখন একটি সমস্যা হয়, তারপরেও বৈধতা বলে, ইমেল ঠিকানাটি অবৈধ

— সুমিত বিজানি

এটি দুর্দান্ত কাজ করে। আমি চাই যে এইচটিএমএল 5 "প্রয়োজনীয়" কার্যকারিতাটি কেবল হোয়াইটস্পেসের চার্স জমা দেওয়ার বিরুদ্ধেও বৈধতা দিতে (যেখানে ডিফল্টরূপে এটি কেবল একটি খালি স্ট্রিং জমা দেওয়ার বিরুদ্ধে বৈধতা দেয়)। সুতরাং আমি দুটি লাইনটি পরিবর্তিত করেছি if (input.value == "") {, পরিবর্তে পড়তে if (input.value.trim() == "") {- আমার জন্য কৌশলটি।

— জাজা

Answer 2

আপনি অননুযুক্ত বৈশিষ্ট্যটি ব্যবহার করে এই ডেমো কোডটি চেকআউট করে কেবল এটি অর্জন করতে পারেন

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

কোডেপেন ডেমো: https://codepen.io/akshaykhale1992/pen/yLNvOqP

Comments

হ্যাঁ, প্রত্যেকে কোডের পৃষ্ঠা ফেলে দিচ্ছেন, আমি খুব অলস এবং আমি ইনলাইন সন্ধান করছি, ধন্যবাদ @ আকাশে খালে আপনার উত্তরটি সেরা।

— ধীররাজ থেদিজে

@ থেডিজে সাহায্য করতে পেরে খুশি

— অক্ষয় খালে

দয়া করে মনে রাখবেন যে setCustomValidity মত কিছু দিয়ে পুনরায় সেট করা হয়েছে oninput="setCustomValidity('')": stackoverflow.com/a/16878766/1729850

— Leia

এই উত্তরটি শেষ করার জন্য @ লিয়া ধন্যবাদ। দুর্ভাগ্যক্রমে রেডিও বোতামগুলির জন্য কাজ করে না। অর্থাত্ যদি আপনি এক বোতামটিতে অবৈধটিকে ট্রিগার করেন তবে কাস্টম স্ট্রিং যুক্ত হয়। তারপরে আপনি যদি কোনও ভিন্ন রেডিও বোতামটি ক্লিক করেন তবে এটি প্রথমটির কাটমভালিডিটি স্ট্রিংটি সাফ করবে না। সুতরাং দেখে মনে হচ্ছে কিছু সম্পর্কিত জাভাস্ক্রিপ্ট শুনতে এবং সম্পর্কিত সম্পর্কিত রেডিও বোতামগুলির উপর কোনও সেট কাস্টমভালিডিটি সাফ করার প্রয়োজন হবে।

— ryan2johnson9

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। সরলতা সর্বোত্তম সমাধান।

— কেনো ক্লেটন

Answer 3

এইচটিএমএল:

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

জাভাস্ক্রিপ্ট:

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

সমৃদ্ধ এইচটিএমএল সামগ্রী ব্যবহার করার কোনও সুযোগ? এটি কেবল পাঠ্যকে সমর্থন করে বলে মনে হচ্ছে, কোনও ট্যাগ নেই <b>Error: </b> Incorrect email address।

— gaমেগা

আমি যতদূর জানি এটি এখনও সম্ভব হয়নি। আপনি সেই অনুসারে ফলাফলটি স্টাইল করতে পারেন সিএসএসের সাথে, তবে অবশ্যই এটির সীমাবদ্ধতা রয়েছে এবং এটি আপনার ক্ষেত্রে প্রযোজ্য নয়। যে কোনও হারে, প্রযুক্তিটি এখনও মোটামুটি নতুন এবং বেশিরভাগের পক্ষে যথেষ্ট পরিমাণে সমর্থিত নয়, তাই আমার মতে আপনার প্রয়োগ যাই হোক না কেন আপনি আপাতত বিকল্প সমাধান ব্যবহার করে এখনও ভাল better

— লেভি বোটেলহো

আসুন কখনও কখনও বলি (অন্যান্য ইনপুটগুলির উপর নির্ভর করে), আমি এই জাতীয় ইনপুট ক্ষেত্রে ফাঁকা মানকে অনুমতি দিতে চাই। আমি তখন ডিফল্ট বৈধতা বার্তাটি কীভাবে বন্ধ করব? বরাদ্দ করা setCustomValidity("")কোনও উপকারে আসে না। আরও কিছু প্যারামিটার সেট করার দরকার আছে? দয়া করে উপদেশ দাও.

— মেগা

Answer 5

ম্যান, আমি এটি এইচটিএমএল 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 : "");
        };
    });
});

খুশী হলাম। এখানে সহজ ফর্ম এইচটিএমএল:

<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হ'ল কাস্টম অ্যাট্রিবিউট about আপনি প্রতিটি প্রয়োজনীয় ক্ষেত্রের জন্য আপনার বার্তাটি সেট করতে পারেন কারণ এটি যখন ত্রুটি বার্তাটি প্রদর্শন করবে তখন jQuery এটি থেকে আসে। আপনার প্রতিটি ক্ষেত্রকে সরাসরি জাভাস্ক্রিপ্টে সেট করতে হবে না, jQuery এটি আপনার জন্য করে। এই রেজেক্স ঠিক আছে বলে মনে হচ্ছে (কমপক্ষে এটি আপনার ব্লক করে testing@.com! হাহাহা)

আপনি যেমন ফিডলটিতে দেখতে পাচ্ছেন, আমি ফর্ম ইভেন্টের জমা দেওয়ার অতিরিক্ত বৈধতা দিই ( এটি ডকুমেন্টেও যায় ready প্রস্তুতিও ):

$("#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'); আমি আমার মাথার উপরের স্ট্যান্ডার্ড ডিওএম ইন্টারফেসটি জানি না।

— আইএমএসওপি

@ আইএমএসওপি নিশ্চিত, এটি বৈধ!

— ডন্টভোটমিডাউন

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

আপনি খালি এই onsetd = " বৈশিষ্ট্যটি ব্যবহার করতে পারেন , এই.সেটম কাস্টমভিডিলিটি () ইভেন্টলিস্টারের বিংডিংয়ের সাথে!

এখানে আমার ডেমো কোডগুলি! (আপনি এটি চেক আউট করতে চালাতে পারেন!)

<!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

সেটকাস্টমভিডালিটি ()

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

অন্যান্য বৈধতার শর্তাদি রয়েছে যেমন রেঞ্জ ওভারফ্লো, রেঞ্জউন্ডারফ্লো, স্টেপমিসম্যাচ, টাইপমিসম্যাচ, বৈধ