এইচটিএমএল 5 ফর্ম উপাদানগুলির বৈধতা অক্ষম করুন

Question

আমার ফর্মগুলিতে, আমি নতুন HTML5 ফর্ম প্রকারগুলি ব্যবহার করতে চাই, উদাহরণস্বরূপ <input type="url" />( এখানে প্রকারগুলি সম্পর্কে আরও তথ্য )।

সমস্যাটি হ'ল ক্রোম অত্যন্ত সহায়ক হতে পারে এবং আমার জন্য এই উপাদানগুলিকে বৈধতা দিতে চায়, এটি এটিকে চুষে না ফেলে ব্যতীত। যদি এটি অন্তর্নিহিত বৈধতাটি ব্যর্থ হয়, তবে উপাদানটির ফোকাস পাওয়া ছাড়া অন্য কোনও বার্তা বা ইঙ্গিত নেই। আমি ইউআরএল উপাদানগুলি প্রিফিল করি "http://"এবং তাই আমার নিজস্ব কাস্টম বৈধতা কেবল সেই মানগুলিকে খালি স্ট্রিং হিসাবে বিবেচনা করে তবে ক্রোম এটিকে প্রত্যাখ্যান করে। যদি আমি এর বৈধতা বিধি পরিবর্তন করতে পারি, এটিও কার্যকর হবে।

আমি জানি আমি কেবল ব্যবহারে ফিরে যেতে type="text"পারি কিন্তু আমি এই নতুন ধরণের অফারগুলি ব্যবহার করে দুর্দান্ত বর্ধন চাই (যেমন: এটি স্বয়ংক্রিয়ভাবে মোবাইল ডিভাইসে একটি কাস্টম কীবোর্ড বিন্যাসে স্যুইচ করে):

সুতরাং, অটোমেটিক বৈধতাটি বন্ধ বা কাস্টমাইজ করার কোনও উপায় আছে?

Comments

এইচটিএমএল 5.1 খসড়া বৈশিষ্ট একটি উল্লেখ inputmodeঅ্যাট্রিবিউট যদি আমি বুঝতে করছি কি আমি সঠিকভাবে পড়া - - উল্লেখ কি কীবোর্ডের প্রকার ব্যবহারকারী দেওয়া উচিত ব্যবহার করা যেতে পারে যখন তারা ক্ষেত্র সাথে ইন্টারঅ্যাক্ট, যা ছাড়া যে কোনো বৈধতা নিয়ম implying। ভবিষ্যতের কোনও সময়ে, inputmodeঅ্যাট্রিবিউটের পরিবর্তে অ্যাট্রিবিউট ব্যবহার করা typeসম্ভবত এই সমস্যার সঠিক সমাধান হতে পারে - তবে এখনও হয়নি।

— মার্ক আমেরিকা

@ মার্ক অ্যামেরি যদিও এখন ভবিষ্যত পাওয়া খুব কঠিন হবে না:$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });

— মার্নেন লাইবো-কোসার

@ মার্নেনলাইবো-কোসার আপনি যা যা বর্ণনা করেছেন তা যদি কাজ করে তবে যা যা করা উচিত তা বৈধতা বন্ধ করে দেওয়া (প্রশ্নকারী দ্বারা নির্ধারিত হিসাবে), এটি তেমন ফলাফল অর্জন inputmodeকরবে না। জিনিসগুলি আপনার পদ্ধতিতে করা, আপনি এখনও (উদাহরণস্বরূপ) অ-সংখ্যাসূচক মানগুলি পড়তে পারবেন না যা ব্যবহারকারী টাইপের একটি ইনপুট বাক্সে টাইপ করে number। উদাহরণস্বরূপ, এই ফ্রেডের পাঠ্য বাক্সে অ-সংখ্যাসূচক কিছু টাইপ করে বোতামটি ক্লিক করার চেষ্টা করুন।

— মার্ক আমেরিকা

নিবন্ধন করুন এটি কি <input type='number'>অ-সংখ্যাসূচক মানগুলি গ্রহণ করে না বলে ?

— মার্নেন লাইবো-কোসার

@ মার্নেনলাইবো-কোসার আমি অনুমান করি। সমস্যা সম্পর্কে এই প্রশ্নের স্বীকৃত উত্তরে এমন একটি লিঙ্ক অন্তর্ভুক্ত রয়েছে যা উত্তরদাতা দাবি করেন যে এই আচরণটি বাধ্যতামূলক করে।

— মার্ক অ্যামেরি

Answer 1

আপনি যদি এইচটিএমএল 5 তে কোনও ফর্মের জন্য ক্লায়েন্ট সাইডের বৈধতা অক্ষম করতে চান তবে ফর্ম উপাদানটিতে একটি অকার্যকর বৈশিষ্ট্য যুক্ত করুন। উদা:

<form method="post" action="/foo" novalidate>...</form>

Https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novolidate দেখুন

Comments

novalidate="novalidate"এবং novalidate=""বৈধ বাক্য গঠনও।

— বাসিম

@ বাসিম বৈধ সিনট্যাক্স তবে অতিরিক্ত ভারবস — আপনার প্রয়োজনের চেয়ে বেশি কেন টাইপ করুন?

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

@ user1569050 উদাহরণস্বরূপ CakePHP মত অবকাঠামো, এটা ব্যবহার করবে novalidate="novalidate"পদ্ধতি যখন আপনি সেট novalidate => trueমধ্যে $optionsঅ্যারে FormHelper::create()। অতিরিক্ত তথ্যের জন্য :) ধন্যবাদ bassim

— Jelmer

@ rybo111 এটি ক্লায়েন্ট-পাশের বৈধতা, যা সার্ভারে অনুরোধের সংখ্যা কমিয়ে দেওয়া ভাল। এটি সার্ভার-সাইডে বৈধতা সহজ করতে কোনও অজুহাত নয়।

— মার্টি

@ মার্তি আমি এই বিষয়টি উল্লেখ করছিলাম যে আমি যদি কিছু নতুন পিএইচপি বৈধতা পরীক্ষা করি তবে আমি পুরো ফর্মটি সঠিকভাবে পূরণ করতে না পারার জন্য সেই ফর্মটির জন্য জাভাস্ক্রিপ্টের বৈধতা দ্রুত অক্ষম করতে পারি। আমার "পরীক্ষা করা সহজ" লেখা উচিত ছিল।

— rybo111

Answer 2

আমি অনুমানটি পড়েছিলাম এবং Chrome এ কিছু পরীক্ষা করেছি এবং আপনি যদি "অবৈধ" ইভেন্টটি ধরে ফেলেন এবং মিথ্যা ফিরিয়ে দেন যা ফর্ম জমা দেওয়ার অনুমতি দেয় বলে মনে হয়।

আমি এইচটিএমএল সহ, jquery ব্যবহার করছি।

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

আমি এটি অন্য কোনও ব্রাউজারে পরীক্ষা করিনি।

Comments

দুর্দান্ত - আমি আগামীকাল এটি চেষ্টা করে দেখব এবং এটি কীভাবে চলে। ধন্যবাদ।

— নিকফ

কি দারুন! আমার জমা দেওয়ার ইভেন্টটি কোথায় গিয়েছিল তা দেখার জন্য আমি সত্যিই কঠিন সময় কাটাচ্ছিলাম। ধন্যবাদ জনাব!

— জিপসি কিং

ফায়ারফক্স ইনপুট পরিবর্তনে বৈধতা দিচ্ছে। তারপরে 'অবৈধ' ইভেন্টটি বরখাস্ত করা হয় না। সুতরাং, আমার জন্য কোনও সমাধান নেই।

— নিলস স্টেনবিক

আগামীকাল কখনই আসে না :)

— লাকি সনি

কাজ করে না। আমি কোডটি একটি স্নিপেট তৈরি করেছি। invalidইভেন্টটি ধরা এবং মিথ্যা ফিরিয়ে ফর্মটি জমা দিতে দেয় না।

— ড্যান ড্যাসকলেসকু

Answer 3

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

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

Comments

এন্ট্রি কাকে বলা হত?

— tm_forthefuture

হাহা - আমি আর দুঃখিত জানি না। এটি এখন 3 বছর আগে ছিল। :(

— বিএফট্রিক

আপনার অর্থ <form action="" method="" class="" id="" novalidate>

— মুহাম্মদ শাহজাদ

Answer 4

সেরা সমাধান হ'ল একটি পাঠ্য ইনপুট ব্যবহার করা এবং ইউআরএল কীবোর্ড সুবিধা প্রদানের জন্য বৈশিষ্ট্য ইনপুটমোড = "ইউআরএল" যুক্ত করা। এই উদ্দেশ্যে এইচটিএমএল 5 স্পেসিফিকেশন ভাবা হয়েছিল। আপনি যদি টাইপ = "ইউআরএল" রাখেন তবে আপনি সিনট্যাক্সের বৈধতা পাবেন যা প্রতিটি ক্ষেত্রেই কার্যকর নয় (এটি সিনট্যাক্সের পরিবর্তে 404 ত্রুটি প্রদান করে যা বেশ অনুমতিযোগ্য এবং দুর্দান্ত সাহায্যের নয়) তা পরীক্ষা করা ভাল)।

আপনার আরও উদাহরণস্বরূপ প্যাটার্ন = "https?: //.+" বৈশিষ্ট্যটির সাথে ডিফল্ট প্যাটার্নটি ওভাররাইড করার সম্ভাবনা রয়েছে।

ফর্মটিতে অযোগ্য বৈশিষ্ট্যটি জিজ্ঞাসা করা প্রশ্নের সঠিক উত্তর নয় কারণ এটি ফর্মের সমস্ত ক্ষেত্রের বৈধতা সরিয়ে দেয় এবং উদাহরণস্বরূপ আপনি ইমেল ক্ষেত্রগুলির জন্য বৈধতা রাখতে চাইতে পারেন।

বৈধতা অক্ষম করতে jQuery ব্যবহার করাও একটি খারাপ সমাধান কারণ এটি জাভাস্ক্রিপ্ট ছাড়া একেবারে কাজ করা উচিত।

আমার ক্ষেত্রে, আমি ইউআরএল ইনপুটের আগে 2 টি বিকল্প (HTTP: // বা https: //) দিয়ে একটি নির্বাচন উপাদান রেখেছি কারণ আমার কেবল ওয়েবসাইটগুলির প্রয়োজন (এবং কোনও ftp: // বা অন্যান্য জিনিস নেই)। আমি এই অদ্ভুত উপসর্গটি টাইপ করা এড়াতে পারি (টিম বার্নার্স-লি এর সবচেয়ে বড় অনুশোচনা এবং সম্ভবত ইউআরএল সিনট্যাক্স ত্রুটির মূল উত্স) এবং আমি স্থানধারীদের (এইচটিটিপি ছাড়াই) ইনপুটমোড = "ইউআরএল" সহ একটি সাধারণ পাঠ্য ইনপুট ব্যবহার করি। আমি ওয়েবসাইটটির আসল অস্তিত্ব যাচাই করতে jQuery এবং সার্ভার সাইড স্ক্রিপ্ট ব্যবহার করি (কোন 404 নেই) এবং যদি sertedোকানো হয় তবে HTTP উপসর্গটি সরাতে (আমি প্যাটার্ন = "^ ((? Http) এর মতো কোনও প্যাটার্ন ব্যবহার করা এড়াতে পারি)")) উপসর্গটি স্থাপন করা রোধ করার জন্য কারণ আমি মনে করি এটি আরও অনুমোদিত হওয়া ভাল is

Answer 5

ব্রাউজারের বৈধতার চারপাশে একটি শেষ রান করার চেষ্টা করার পরিবর্তে, আপনি http://স্থানধারক পাঠ্য হিসাবে এতে রাখতে পারেন । এটি আপনি যে লিঙ্কটি যুক্ত করেছেন সেই পৃষ্ঠা থেকে:

স্থানধারক পাঠ্য

HTML5 ওয়েব রূপগুলিতে প্রথম উন্নতি করে তা হ'ল একটি ইনপুট ক্ষেত্রে স্থানধারক পাঠ্য সেট করার ক্ষমতা । ক্ষেত্রটি খালি থাকায় এবং ফোকাস না করা প্লেসহোল্ডার পাঠ্য ইনপুট ফিল্ডের অভ্যন্তরে প্রদর্শিত হবে। আপনি ইনপুট ক্ষেত্রে (বা ট্যাব) ক্লিক করার সাথে সাথে স্থানধারক পাঠ্যটি অদৃশ্য হয়ে যাবে।

আপনি সম্ভবত স্থানধারক পাঠ্য আগে দেখেছেন। উদাহরণস্বরূপ, মোজিলা ফায়ারফক্স 3.5 এখন অবস্থান বারে স্থানধারক পাঠ্য অন্তর্ভুক্ত করে যা "অনুসন্ধান বুকমার্কস এবং ইতিহাস" পড়বে:

আপনি যখন অবস্থান বারটিতে ক্লিক করুন (বা ট্যাব করুন), স্থানধারক পাঠ্যটি অদৃশ্য হয়ে যাবে:

হাস্যকরভাবে, ফায়ারফক্স 3.5 আপনার নিজের ওয়েব ফর্মগুলিতে স্থানধারক পাঠ্য যুক্ত করে না। সি'স্ট লা ভি।

স্থানধারক সমর্থন

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

আপনি কীভাবে আপনার নিজের ওয়েব ফর্মগুলিতে স্থানধারক পাঠ্য অন্তর্ভুক্ত করতে পারেন তা এখানে:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

ব্রাউজারগুলি যা placeholderঅ্যাট্রিবিউটকে সমর্থন করে না তারা কেবল এটিকে এড়িয়ে যাবে। কোন ক্ষতি, কোন ফাউল। আপনার ব্রাউজার স্থানধারক পাঠ্য সমর্থন করে কিনা তা দেখুন ।

এটি ঠিক একই রকম হবে না যেহেতু এটি ব্যবহারকারীর জন্য "প্রারম্ভিক বিন্দু" সরবরাহ করে না, তবে এটি অন্তত অর্ধেক পর্যন্ত রয়েছে।

Comments

টিপটির জন্য +1, তবে এটি আমার জন্য দুর্ভাগ্যজনকভাবে কোনও সমাধান হতে পারে না। আমি এখনও কোনও বৈধতা সম্পন্ন করতে চাই না, মূলত কারণ এর জন্য ইউএক্স এত দুর্বল।

— নিকফ

Answer 6

আমি নীচের নীচের যাচাইকরণ ফর্মটি বাইপাস না করে সিএসএস সহ এই সিএসএস সহ Chrome এর জন্য একটি সমাধান পেয়েছি যা খুব কার্যকর হতে পারে।

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

এইভাবে, আপনি নিজের বার্তাটিও কাস্টমাইজ করতে পারেন ...

আমি এই পৃষ্ঠায় সমাধান পেয়েছি: http://trac.webkit.org/wiki/Styling%20Form%20 নিয়ন্ত্রণগুলি

Comments

এটি ক্রোমের সর্বশেষতম সংস্করণে কাজ করে না (29), আমি ভাবছি এটি

— ঝলকানোর

Answer 7

কেবলমাত্র আপনার ফর্মটিতে অবিরাম ব্যবহার করুন ।

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

চিয়ার্স !!!

Comments

একক ইনপুট ট্যাগের বৈধতা অক্ষম করার বিষয়ে কী?

— টোবিয়াস কলব

Answer 8

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

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

Answer 9

আপনি এই জঘন্য বৈধতা বুদবুদকে ছাড়িয়ে যেতে এবং আপনার নিজস্ব বৈধকারকদের যুক্ত করতে কিছু জাভাস্ক্রিপ্ট যুক্ত করতে পারেন।

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

Answer 10

আপনি যদি required=""তখন কোনও ফর্ম উপাদান চিহ্নিত করেনnovalidate="" করে না।

requiredবৈধতা রোধ করার একটি উপায় হল উপাদানটি অক্ষম করা ।

Answer 11

আপনি সাধারণ ক্রোম এক্সটেনশানটি ইনস্টল করতে পারেন এবং কেবল ফ্লাই https://chrome.google.com/webstore/detail/html5-for-ediaation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related এ বৈধকরণ অক্ষম করতে পারবেন

ডিফল্টরূপে সবকিছু ডিফল্ট হিসাবে কাজ করবে তবে আপনি টুলবারে এক্সটেনশন আইকনে একক ক্লিক করে এইচটিএমএল 5 বৈধকরণ অক্ষম করতে সক্ষম হবেন

Comments

অনেক লোক কেন এই সমাধানটিকে অপছন্দ করে তা নিশ্চিত নয়, এটি প্রকৃত এইচটিএমএল কোডটি টোক না করে এইচটিএমএল 5 ফর্মগুলির জন্য সার্ভারের বৈধতা পরীক্ষা করার অনুমতি দেয়

— অ্যান্ড্রু

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

— কলম্যানেশন