আমি কীভাবে এইচটিএমএল 5 ফর্ম বৈধতা ডিফল্ট ত্রুটি বার্তাগুলি পরিবর্তন বা মুছে ফেলতে পারি?

Question

যেমন আমি একটি textfield। ক্ষেত্রটি বাধ্যতামূলক, কেবলমাত্র সংখ্যা প্রয়োজন এবং মানের দৈর্ঘ্য 10 হতে হবে I আমি যখন দৈর্ঘ্য 5 এর মান সহ ফর্মটি জমা দেওয়ার চেষ্টা করি, তখন ডিফল্ট ত্রুটি বার্তা উপস্থিত হয়:Please match the requested format

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

1. আমি কীভাবে এইচটিএমএল 5 ফর্ম বৈধতা ত্রুটিগুলি ডিফল্ট বার্তাগুলি পরিবর্তন করতে পারি?
2. যদি প্রথম পয়েন্টটি করা যায়, তবে কিছু সম্পত্তি ফাইল তৈরি করার এবং সেই ফাইলগুলিতে কাস্টম ত্রুটি বার্তা সেট করার কোনও উপায় আছে কি?

Comments

আমি মাহুর ১৩ টি উত্তর সম্পর্কে একটি ত্রুটি পেয়েছি, এটি লুপে কাজ করছে না তাই এটি ঠিক করেছি এবং কিছু সংশোধন করে উত্তর দেব, যা আপনি উত্তর বিভাগের অধীনে খুঁজে পেতে পারেন। এখানে লিঙ্ক stackoverflow.com/questions/10361460/...

— দর্শন Gorasia

Answer 1

অঙ্কুর উত্তরে আমি একটি বাগ খুঁজে পেয়েছি এবং আমি এই সংশোধন করে এটি ঠিক করেছি:

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

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

Comments

আমি ইনলাইন ইভেন্টগুলি ব্যবহার করার বিরুদ্ধে পরামর্শ দিই। এটি একটি ভাল অনুশীলন না।

— জার্ডে

@ মাহুর 13 আমি এটি এর অনুরূপ লিখেছি তবে এটি কখনই বৈধ হয় না। আপনি কি একটি ইঙ্গিত গিম করতে পারেন? jsfiddle.net/2USxy

— Sliq

এখানে একটি কাস্টম ফায়ারফক্স সম্পত্তি যুক্ত করা যেতে পারে যা ভালভাবে কাজ করে: x-moz-errormessage = "দয়া করে কেবল সংখ্যা লিখুন"

— কলিফ

ইনপুটটি বৈধ আছে কি না তা কার্যকরভাবে দেখতে "ওঙ্কচে" এর পরিবর্তে "অনকিআপ" ব্যবহার করা আরও ভাল।

— জাম ভিলে

এটিতে নিম্নোক্ত সমস্যাটি রয়েছে (কমপক্ষে ক্রোম 55 এ): যখন অবৈধ বার্তাটি পপ হয়, ব্যবহারকারী যদি অবৈধ ক্ষেত্রে (ক্লিক না করে) ফোকাস রাখে এবং ক্ষেত্রটি সম্পাদনা করে তবে বার্তাটি পপআপ করে রাখে - এমনকি ক্ষেত্রটি বৈধ হলেও - এটি হয় ফোকাস আউট বা ট্রিগার জমা প্রয়োজন।

— 21:40

Answer 2

প্যাটার্ন ব্যবহার করার সময় = এটি শিরোনাম বৈশিষ্ট্যে যা কিছু প্রদর্শিত হবে তা প্রদর্শিত হবে, সুতরাং কোনও জেএস প্রয়োজন নেই:

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

Comments

খুব সুন্দর উত্তর। সমস্ত জিনিস যেমন HTML5 এর মতো, নির্ভরযোগ্যতা ব্রাউজারের উপর নির্ভর করে। এই সমাধানটি এফএফ 15 এবং ক্রোম 22 দিয়ে দুর্দান্ত কাজ করেছে, তবে সাফারি 5 এর সাথে নয় (

— OSX

উত্তম উত্তর, তবে এখানে পশ্চাদপদ (বা এমনকি বর্তমান) সামঞ্জস্যতা সম্পর্কে সতর্ক থাকুন।

— বোহনি

আমি যখন "foo" এ একটি শিরোনাম সেট করি আমি "অনুরোধ করা ফর্ম্যাটটি মেলে দয়া করে। Foo" পাই, সুতরাং এটি আমার পক্ষে কার্যকর হবে না

— দান

শিরোনামটি মাউস হোভারের টুলটিপ পাঠ্য হিসাবেও ব্যবহৃত হয়, তাই আমি এই পদ্ধতির থেকে দূরে থাকব।

— fotijr

শিরোনামটি মাউস হোভারের টুলটিপ পাঠ্য হিসাবেও ব্যবহৃত হয়, তাই এটি সম্ভবত সেরা পন্থা।

— ওড্রাএইনকোডটি

Answer 3

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

আমি এই পোস্টটি অন্য পোস্টে পেয়েছি।

Comments

ধন্যবাদ, এটা আমার জন্য কাজ করেছে। যদিও আমি পোস্ট বা ব্লগ বা সাইট এটি উল্লেখ করে খুঁজে পাই নি।

— ব্যবহারকারী 219628

নিম্নলিখিত পোস্টে নোট নিন যখন setCustomValitidy ব্যবহার বিবেচনা করা stackoverflow.com/questions/16867407/...

— Konstantinos Chertouras

Answer 4

এইচটিএমএল:

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />

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

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Fiddle Demo

Answer 5

ব্রাউজারের বৈধতা বার্তাটি আপনার নথিতে jQuery সহ প্রদর্শিত হতে বাধা দিতে:

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

Answer 6

আপনি নিম্নলিখিতটি করে এই সতর্কতাটি সরাতে পারেন:

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

কাস্টম বার্তাটি কেবল একটি ফাঁকা জায়গায় সেট করুন

Answer 7

সীমাবদ্ধতা যাচাইকরণ API এর মাধ্যমে আপনি এগুলি পরিবর্তন করতে পারেন: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

আপনি যদি একটি সহজ সমাধান চান, আপনি civem.js, কাস্টম ইনপুট বৈধতা ত্রুটি বার্তা জাভাস্ক্রিপ্ট বিনামূল্যে ডাউনলোড করতে পারেন এখানে: https://github.com/javanto/civem.js লাইভ ডেমো এখানে: http://jsfiddle.net/ hleinone / njSbH /

Answer 8

সেট কাস্টমভিডালিটি আপনাকে ডিফল্ট বৈধতা বার্তাটি পরিবর্তন করতে দেয় H এখানে এটি কীভাবে ব্যবহার করতে হয় তার একটি সহজ এক্সপ্লোর।

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

Answer 9

আমি দুর্ঘটনাক্রমে এখন একটি উপায় পেয়েছি: আপনার এটি ব্যবহার করতে হবে: ডেটা-ত্রুটি: ""

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

Answer 10

আমি মাহুর ১৩ এর উত্তরে একটি ত্রুটি পেয়েছি, এটি লুপে কাজ করছে না তাই আমি এটিকে সংশোধন করে স্থির করেছি:

এইচটিএমএল:

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

এটি পুরোপুরি লুপে চলবে।

Answer 11

এটি একটি খুব ভাল লিঙ্ক আমি এইচটিএমএল 5 বৈধতার বিভিন্ন বৈশিষ্ট্যগুলি পরীক্ষা করার বিষয়ে পেয়েছি।

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

আশা করি এটি কাউকে সাহায্য করবে।

Answer 12

আপনি এখানে দেখতে পারেন:

এইচটিএমএল 5 অন ইনফল ইনপুট ক্ষেত্র স্থির করার পরে কাজ করে না

আপনার পক্ষে সেইভাবে রাখা ভাল, কারণ আপনি যখন ত্রুটিটি ঠিক করেন তখন সতর্কতা বার্তাটি অদৃশ্য হয়ে যায়।

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

Answer 13

এইচটিএমএল 5 বৈধতা ব্যবহারের জন্য কাস্টম ত্রুটি বার্তা সেট করতে,

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

এবং ব্যবহারকারী যখন বৈধ ডেটা ব্যবহারে প্রবেশ করে তখন এই বার্তাটি সরাতে,

onkeyup="setCustomValidity('')"

আশা করি এটি আপনার পক্ষে কাজ করে। উপভোগ করুন;)

Answer 14

এটি ক্রোমে আমার পক্ষে কাজ

    <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')"

Answer 15

কেবলমাত্র আপনি <ফর্ম> ট্যাগের জন্য "নোডলিয়েট" ব্যবহার করতে পারেন

আরও সনাক্ত করার জন্য এখানে ক্লিক করুন