নাম = '' সহ একটি অবৈধ ফর্ম নিয়ন্ত্রণ মনোনিবেশযোগ্য নয়

Question

আমার ওয়েবসাইটে তীব্র সমস্যা আছে। গুগল ক্রোমে কিছু গ্রাহকরা আমার অর্থপ্রদানের পৃষ্ঠায় যেতে সক্ষম হন না। কোনও ফর্ম জমা দেওয়ার চেষ্টা করার সময় আমি এই ত্রুটিটি পেয়েছি:

An invalid form control with name='' is not focusable.

এটি জাভাস্ক্রিপ্ট কনসোল থেকে এসেছে।

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

কে এই ত্রুটিটি পায় তা এলোমেলো মনে হচ্ছে। কেউ কি এর সমাধান সমাধান জানেন?

Comments

আপনি যদি ভাবেন যে এটি লুকিয়ে থাকা প্রয়োজনীয় ক্ষেত্রগুলির কারণে হতে পারে, তবে সম্ভবত কিছু ক্ষেত্রে সেই ক্ষেত্রগুলি ফাঁকা রয়েছে কিনা তা আপনার চেক করা উচিত? উদাহরণস্বরূপ, যদি আপনি সেশন থেকে ইউজার_আইড পূরণ করেন বা কিছু অনুরূপ, কিছু ক্ষেত্রে এটি ফাঁকা থাকতে পারে?

— dkasipovic

একমত। গুগল ক্রোমে ডেভেলপার কনসোল (F12) খুলুন এবং এই ক্ষেত্রগুলির মানগুলি ফাঁকা আছে কিনা তা দেখার জন্য ক্ষেত্রগুলির মানগুলি পরীক্ষা করুন।

— ভ্যানিলা থ্রিলা

আপনার মন্তব্যের জন্য ধন্যবাদ. এটি যদিও আমার কাছে কোনও ধারণা তৈরি করে না? আমার একটি সাধারণ এস্প নেট ফর্ম রয়েছে, যা এসপ নেট ফর্ম নিয়ন্ত্রণ ব্যবহার করে। ইনপুট নিয়ন্ত্রণগুলি ফ্রেমওয়ার্ক দ্বারা উত্পন্ন হয়।

— এমপি 1990

আমি চেক করেছি এবং ইনপুট ক্ষেত্রে মান আছে। আমার একটি লুকানো ইনপুট ক্ষেত্র রয়েছে যার একটি মানও রয়েছে।

— এমপি 1990

আমি মনে করি ক্ষেত্রটি যখন প্রয়োজন হয় তবে এটি সাধারণভাবে "দৃশ্যমান" হয় না। ক্ষেত্রটি বেশ কয়েকটি ট্যাবে বিভক্ত ফর্মের সাথে আমার ক্ষেত্রে এটি ঘটে যা ত্রুটি ঘটিয়েছিল এমন একটি ট্যাবে রয়েছে যা জমা দেওয়ার মুহুর্তে সক্রিয় নয় আমি ক্ষেত্র থেকে প্রয়োজনীয় বৈশিষ্ট্যটি সরিয়েছি এবং নির্দিষ্ট বৈধতা

— দিয়েছি

Answer 1

এই সমস্যাটি ক্রোমে ঘটে যদি কোনও ফর্ম ক্ষেত্র বৈধতা ব্যর্থ করে তবে সংশ্লিষ্ট অবৈধ নিয়ন্ত্রণের কারণে ব্রাউজারের বার্তাটি "দয়া করে এই ক্ষেত্রটি পূরণ করুন" বার্তাটি প্রদর্শনের চেষ্টাটি পাশাপাশি ব্যর্থ হয়।

বৈধতা বিভিন্ন সময়ে ট্রিগার করার সময় একটি ফর্ম নিয়ন্ত্রণ ফোকাসযোগ্য নাও হতে পারে। নীচে বর্ণিত দুটি পরিস্থিতি সর্বাধিক বিশিষ্ট কারণ:

• ক্ষেত্রটি ব্যবসায়ের যুক্তির বর্তমান প্রেক্ষাপট অনুসারে অপ্রাসঙ্গিক। এই জাতীয় দৃশ্যে, সম্পর্কিত নিয়ন্ত্রণটি ডিওএম থেকে অপসারণ করা উচিত বা এটিকে এটিকে requiredবৈশিষ্ট্যের সাথে চিহ্নিত করা উচিত নয় ।

• কোনও ইনপুটটিতে কোনও ENTER কী টিপে দেওয়ার কারণে অকাল বৈধতা দেখা দিতে পারে । অথবা কোনও ব্যবহারকারী ফর্মের একটি বোতাম / ইনপুট নিয়ন্ত্রণে ক্লিক করছেন যা typeনিয়ন্ত্রণের বৈশিষ্ট্যটি সঠিকভাবে সংজ্ঞায়িত করেনি । যদি কোনও বোতামের প্রকারের বৈশিষ্ট্যটি সেট না করা থাকে button, প্রতিটি সময় বোতামটি ক্লিক করার সময় ক্রোম (বা অন্য কোনও ব্রাউজার) একটি বৈধকরণ সম্পাদন করে কারণ submitএকটি বোতামের typeবৈশিষ্ট্যের ডিফল্ট মান value

  সমস্যা সমাধানের জন্য, যদি আপনি যে ছাড়া অন্য অন্য কিছু করে আপনার পেজে একটি বাটন আছে জমা বা রিসেট , সবসময় এই কাজ করতে মনে রাখবেন: <button type="button">।

এছাড়াও https://stackoverflow.com/a/7264966/1356062 দেখুন

Comments

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

— গ্রেট

বিস্তারিত উত্তর দেওয়ার জন্য ধন্যবাদ। বাদ দেওয়া requiredবা যোগ novalidateকরা কখনই ভাল কাজ নয়।

— ফ্যাটকপ

এটি সঠিক উত্তর হওয়া উচিত। আপনি যদি এইচটিএমএল 5 ক্লায়েন্ট সাইডের বৈধতা ব্যবহার করে থাকেন, অন্যটি তৈরি করার সময় কোনও সমস্যা সমাধান না করে কোনও অডিয়ুটিকেট সংশোধন করে। খারাপের জন্য ক্রোম এমন একটি ইনপুট যাচাই করা না যাচাই করতে চায় (এবং সুতরাং এর প্রয়োজন হবে না)।

— খেতি

আমার ক্ষেত্রে কেবল উদাহরণ হিসাবে রেখে, একটি গোপন numberক্ষেত্র ছিল যেখানে ডিফল্ট মানটি ধাপের আকার দ্বারা সমানভাবে বিভাজ্য ছিল না। পদক্ষেপের আকার পরিবর্তন করা সমস্যার সমাধান করেছে।

— জেমস স্কট

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

— জন

Answer 2

novalidateফর্মটিতে একটি বৈশিষ্ট্য যুক্ত করা সহায়তা করবে:

<form name="myform" novalidate>

Comments

এটি কোনও সুরক্ষা ঝুঁকি নয়। (ক্লায়েন্ট-পাশের চেকগুলির উপর নির্ভর করা)) এটি একটি ব্যবহারযোগ্যতা সমস্যা problem

— জুক্কা কে। কোরপেলা

আমি চেষ্টা করে দেখেছি যে "নোডলিয়েট" দরকার নেই! আমি কেবল আমার ফর্মটিকে একটি নাম দিয়েছি এবং সবকিছু ঠিকঠাক কাজ করেছে!

— সানি শর্মা

আমি চেষ্টা করে দেখেছি যে "নোডলিয়েট" আসলেই প্রয়োজনীয়। কেবলমাত্র একটি ফর্মের নাম যুক্ত করা কাজ করে না।

— জেফ টিয়ান

নোডিয়িয়েট যুক্ত করা ক্লায়েন্টের পক্ষের বৈধতা যেমন বন্ধ করে দেয় যেমন রেল সাধারণ ফর্ম রত্নের সাথে। অঙ্কিতের উত্তর + ডেভিড ব্রুনোর মন্তব্য অনুসারে সমস্যা ক্ষেত্রগুলির প্রয়োজন নেই, আরও ভাল।

— ইস্পাত

আমি আবিষ্কার করেছি যে "নাম = '' সহ একটি অবৈধ ফর্ম নিয়ন্ত্রণ মনোনিবেশযোগ্য নয়" " ইনপুটগুলি 2<fieldset>

— অস্কারগিলফসি

Answer 3

আপনার form, আপনি লুকানো থাকতে পারে inputনা থাকার requiredঅ্যাট্রিবিউট:

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

এই formউপাদানগুলির উপর ফোকাস করতে পারে না, আপনাকে requiredসমস্ত লুকানো ইনপুটগুলি সরিয়ে ফেলতে হবে, বা জাভাস্ক্রিপ্টে কোনও বৈধতা ফাংশন প্রয়োগ করতে হবে যদি আপনার সত্যই কোনও লুকানো ইনপুট প্রয়োজন হয় তবে সেগুলি পরিচালনা করতে হবে।

Comments

আমি লক্ষ্য করেছি যে এমন কোনও ক্ষেত্রগুলির ক্ষেত্রেও ঘটতে পারে যা "ইমেল" টাইপের নয় যা প্রদর্শন করতে পারে না, ক্রোম ফর্ম্যাটটি বৈধতা দেওয়ার চেষ্টা করার কারণে সৃষ্ট সমস্যা।

— ডেভিড ব্রুনো

এটির দরকার নেই required। patternএকা এই সমস্যা তৈরি করতে পারে।

— পেসারিয়ার

আমার ক্ষেত্রে, ফর্ম ক্ষেত্রগুলি টাইপ করা হয়নি = "লুকানো" এগুলি কেবল দৃষ্টির বাইরে ছিল, যেমন ট্যাবগুলি সহ কোনও ফর্ম।

— জোশ ম্যাক

আমার দুটি ফর্ম রয়েছে, একটিতে একটি <input type="hidden" required />এবং অপর সাথে দুটি <input type="text" style="display: none" required />, এবং ক্রোমে ত্রুটিটি প্রদর্শন করা হচ্ছে কেবলমাত্র display: none, যখন "hidden"একটিটি সূক্ষ্ম জমা দেয়।

— পেরে

এটা সঠিক উত্তর. ক্রোম এমন একটি ক্ষেত্র যাচাইয়ের চেষ্টা করছে যা সিএসএসে লুকানো রয়েছে। এটির এর বৈধতা সতর্কতা বার্তাটি দেখানো থেকে বিরত করছে এবং এটি আপনাকে এই সত্য সম্পর্কে সতর্ক করে দিচ্ছে।

— সুপারলুমিনারি

Answer 4

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

এর সদৃশ কিছু ব্যবহার করে আমি এটি সমাধান করতে সক্ষম হয়েছি:

$("body").on("submit", ".myForm", function(evt) {

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

এছাড়াও, এটি সম্ভবত গুগল ক্রোমে "অবৈধ ফর্ম নিয়ন্ত্রণ" এর সদৃশ

Comments

আপনি যদি এই উত্তরটি নীচে ভোট দিতে আগ্রহী বোধ করেন তবে দয়া করে আমাকে কেন তা জানাতে একটি মন্তব্য করুন। আমি বরং উত্তরটি সরিয়ে ফেলব যদি এতে এখানে না রাখার চেয়ে খারাপ তথ্য থাকে এবং সম্প্রদায়কে বিভ্রান্ত করে।

— হোরাটিও আলেদরান

আমি ভোট হ্রাস করব না, তবে এই কোডটি "সমস্যাটি মাস্কিং" পদ্ধতির জন্য একটি নিষ্ঠুর শক্তি ব্যবহার করেছে বলে মনে করি। উত্তরাধিকারের কোডটি ব্যবহার করার সময় অবশ্যই এটির কার্যকারিতা রয়েছে তবে নতুন প্রকল্পগুলির জন্য আমি আপনার সমস্যাটি একটু শক্ত করে দেখার পরামর্শ দিচ্ছি। এই উত্তরটি ফর্ম ট্যাগে "নোডোফিকেট" ব্যবহারের ক্ষেত্রেও প্রযোজ্য, তবে এটি আরও কিছুটা দৃশ্যমান। অপসারণের পরিবর্তে অক্ষমদের জন্য +1।

— জোনাথন ডিমার্কস

কিছুটা প্রসঙ্গে বলতে গেলে, আমি যখন এই সমস্যার মুখোমুখি হলাম তখন "লিগ্যাসি কোডের সাথে ডিলিং" করার পরিস্থিতিতে আমি ছিলাম। আমি সম্পূর্ণরূপে একমত যে এটি একটি হ্যাক। মার্কআপটি ডিজাইন করা আরও ভাল যাতে আপনি এই পরিস্থিতিতে না পড়েন। তবে, লিগ্যাসি কোডবেস এবং অবিচ্ছিন্ন সিএমএস সিস্টেম সহ, এটি সর্বদা সম্ভব হয় না। সমস্যাটি সমাধান করার জন্য আমি "নোলিডেট" ব্যবহার না করে অক্ষম করার উপরের পদ্ধতির সবচেয়ে ভাল উপায় ছিল think

— হোরাটিও অলডেরান

আমি গোপন ক্ষেত্রগুলি অক্ষম করার পদ্ধতির সাথে একমত। তাদের 'প্রয়োজনীয়' বৈশিষ্ট্যগুলি অপসারণ করা তথ্য হারাতে হবে তাদের পরে আবার দেখানো উচিত। তবে তাদের পুনরায় সক্রিয় করা এটি চালিয়ে যাবে would

— ড্রাকলস

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

— ই

Answer 5

আমার ক্ষেত্রে সমস্যাটি input type="radio" requiredলুকিয়ে থাকার সাথে ছিল:

visibility: hidden;

এই ত্রুটি বার্তাটিও প্রয়োজনীয় ইনপুট প্রকারের radioবা checkboxকোনও display: none;সিএসএস সম্পত্তি আছে কিনা তা দেখায় ।

আপনি যদি কাস্টম রেডিও / চেকবক্স ইনপুটগুলি তৈরি করতে চান যেখানে সেগুলি অবশ্যই ইউআই থেকে লুকিয়ে রাখা requiredউচিত এবং এখনও বৈশিষ্ট্যটি বজায় রাখতে পারেন, পরিবর্তে আপনার ব্যবহার করা উচিত:

opacity: 0; সিএসএস সম্পত্তি

Comments

ব্যতিক্রম একই সমস্যা যে আমি selectivity.js লাইব্রেরি ব্যবহার করছি যা বর্তমান নির্বাচন বাক্সটি আড়াল করে এবং জেএস এবং সিএসএস সহ একটি বিকল্প জেএস বক্স দেখায়। যখন আমি এটিতে প্রয়োজনীয় ব্যবহার করি তখন এই ত্রুটিটি ফর্ম-ফিল্ড নিক্ষেপ করে j cny sugestion আমি কীভাবে এটি চারদিকে কাজ করতে পারি।

— ইনজাম্মাম উল হাসান

@ ইন্জাম্মাম গুজ্জার যেমনটি আমি বুঝতে পেরেছি, আপনার জেএস প্লাগইনটি তার নিজস্ব ক্লাসগুলির সাথে অন্য একটি নির্বাচন ইনপুট তৈরি করছে। হতে পারে প্লাগইন সিএসএসের ক্লাসগুলি পরিবর্তন করা বা name=""মূল একটির পরিবর্তে তৈরি ইনপুট নির্বাচন করা ?

— Gus

Answer 6

পূর্ববর্তী উত্তরগুলির কোনওটিই আমার পক্ষে কাজ করে নি, এবং requiredগুণাবলীর সাথে আমার কোনও লুকানো ক্ষেত্র নেই ।

আমার ক্ষেত্রে, সমস্যাটি তার প্রথম সন্তানের হিসাবে একটি <form>এবং তারপরে জন্মগ্রহণের কারণে ঘটেছিল <fieldset>, যা গুণটির <input>সাথে থাকে required। <fieldset>সমস্যার সমাধান করা সরানো । অথবা আপনি এটি দিয়ে আপনার ফর্মটি গুটিয়ে রাখতে পারেন; এটি HTML5 দ্বারা অনুমোদিত।

আমি উইন্ডোজ 7 এক্স 64, ক্রোম সংস্করণে 43.0.2357.130 মি।

Comments

একই সমস্যা ছিল, ইঙ্গিতটির জন্য ধন্যবাদ। আপনার সমাধান দিয়ে এটি সমাধান করতে পরিচালিত, এটি বিজোড়।

— বেন

ধন্যবাদ, আমার ক্ষেত্রেও এই সমস্যা ছিল।

— চমত্কার

আমার ক্ষেত্রে এই ইঙ্গিতটি আমাকে সহায়তা করে

— আঞ্জা mশুখামতোভা

ফিল্ডসেটগুলিও আমার সমস্যা ছিল। আমার ক্ষেত্রে, উত্তরটি এখানে পাওয়া গেল: stackoverflow.com/a/30785150/1002047 একটি ক্রোম বাগ হিসাবে দেখা যাচ্ছে (যেহেতু প্রশ্নোত্তে এইচটিএমএল W3C এর বৈধকরণকারী ব্যবহার করে যাচাই করে)। কেবল আমার ফিল্ডসেটগুলি ডিভগুলিতে পরিবর্তন করে সমস্যার সমাধান করা।

— এরিক এস। বুলিংটন

নির্দেশনার জন্য @ এরিকস.বুলিংটন ধন্যবাদ। আমি উত্তরটি জানতাম না; সেই ব্যবহারকারী হিসাবে, আমি নিজেই এটি আমার ফর্মের টুকরো টুকরো টুকরো টুকরো করে খুঁজে পেয়েছি। যাইহোক, আমি ক্রোম সংস্করণ নম্বর পদ্ধতি সম্পর্কে জানি না, তবে 4 বছরের মধ্যে 124 থেকে 130 পর্যন্ত কোনও বিশাল পদক্ষেপের মতো দেখাচ্ছে না ...

— পেরে

Answer 7

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

আমি এটি আমার স্টাইলশিটে পেয়েছি:

input[type="checkbox"] {
    visibility: hidden;
}

সরল ফিক্সটি এটি দিয়ে এটি প্রতিস্থাপন করা ছিল:

input[type="checkbox"] {
    opacity: 0;
}

Comments

এটিই আমি সমাধানটি সবচেয়ে ভাল কাজ করতে পেলাম। এটি ত্রুটি বার্তাকে প্রকৃতপক্ষে অদৃশ্য ফর্ম নিয়ন্ত্রণগুলির কাছে প্রদর্শন করতে দেয়।

— রব

Answer 8

এটি এমন হতে পারে যে আপনি প্রয়োজনীয় বৈশিষ্ট্য সহ ক্ষেত্রগুলি লুকিয়ে রেখেছেন (প্রদর্শন: কোনওটি নয়) ।

সমস্ত প্রয়োজনীয় ক্ষেত্র ব্যবহারকারীর জন্য দৃশ্যমান দয়া করে চেক করুন :)

Answer 9

আমার জন্য এটি ঘটে, যখন <select>'' এর মান সহ প্রাক-নির্বাচিত বিকল্পের সাথে কোনও ক্ষেত্র থাকে:

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

দুর্ভাগ্যক্রমে এটি কোনও স্থানধারকের একমাত্র ক্রস-ব্রাউজার সমাধান ( আমি কীভাবে একটি 'নির্বাচন' বাক্সের জন্য একটি স্থানধারক তৈরি করব? )।

সমস্যাটি ক্রোম 43.0.2357.124 এ উঠে আসে।

Answer 10

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

Comments

ইঙ্গিত: $("input").attr("required", "true"); বা $("input").prop('required',true);বিপরীত আপনি যা করতে পারেন অ্যাট্রিবিউট / সম্পত্তি । >> jQuery ইনপুট ক্ষেত্রগুলিতে অ্যাড প্রয়োজনremove

— fWd82

Answer 11

সিলেক্ট 2 জ্যাকুই সমস্যার জন্য

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

সমাধান আপনি কোনও ইভেন্ট শ্রোতাকে কোনও ফর্মের প্রতিটি উপাদানটির 'অবৈধ' ইভেন্টে ইনজেক্ট করতে পারেন যাতে আপনি HTML5 বৈধকরণ ইভেন্টের ঠিক আগে হেরফের করতে পারেন।

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

Answer 12

আপনার যদি এই জাতীয় কোড থাকে তবে এটি বার্তাটি প্রদর্শন করবে:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

Comments

আমি জানি এটি একই রকম আমি কেবল একটি উদাহরণ তৈরি করি, কিছু লোক তারা কোড সহ জিনিসগুলি আরও ভাল বোঝে: ডি

— রবার্ট

Answer 13

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

Comments

এই ধারণার জন্য ধন্যবাদ! স্বতন্ত্র ব্যক্তিদের প্রয়োজন হয় কিনা তা নির্বিশেষে সবসময় লুকিয়ে থাকা সমস্ত ফর্ম উপাদানগুলিতে টগল করা আমার পক্ষে দরকারী ছিল, সুতরাং আমার যুক্তিটি সুন্দর এবং সাধারণ :)

— গ্যাবে কোপালি

Answer 14

.removeAttribute("required")উইন্ডো লোডের সময় লুকিয়ে থাকা সেই উপাদানগুলির জন্য আপনি চেষ্টা করতে পারেন । এটি সম্ভবত সম্ভাব্য যে জাভাস্ক্রিপ্টের কারণে প্রশ্নের মধ্যে থাকা উপাদানটি লুকানো চিহ্নিত হয়েছে (ট্যাবড ফর্মগুলি)

যেমন

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

এটি কাজ করা উচিত।

এটি আমার জন্য ... চিয়ার্সের জন্য কাজ করেছে

Answer 15

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

বৈধতা কার্যকারিতা প্রয়োজনীয় ক্ষেত্রের দিকে ফোকাস করার চেষ্টা করবে এবং ত্রুটির বৈধতা বার্তাটি দেখানোর চেষ্টা করবে তবে ক্ষেত্রটি ইতিমধ্যে লুকানো রয়েছে, সুতরাং "নাম = '' সহ একটি অবৈধ ফর্ম নিয়ন্ত্রণ মনোযোগ নিবদ্ধ করে না" " মনে হচ্ছে,!

সম্পাদনা:

এই কেসটি পরিচালনা করতে আপনার জমা হ্যান্ডলারের ভিতরে কেবলমাত্র শর্তটি যুক্ত করুন

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

সম্পাদনা: ব্যাখ্যা

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

Answer 16

এমন কিছু জিনিস রয়েছে যা এখনও আমাকে অবাক করে দেয় ... আমার দুটি ভিন্ন সত্তার জন্য গতিশীল আচরণ সহ একটি ফর্ম রয়েছে। একটি সত্তার কিছু ক্ষেত্রের প্রয়োজন যা অন্যরা না করে। সুতরাং, আমার জেএস কোড, সত্তার উপর নির্ভর করে, কিছু করে: $ ('# পিরিওডো') remove মুছে ফেলুন ('প্রয়োজনীয়'); $ ( "# Periodo-ধারক") লুকান ()।

এবং যখন ব্যবহারকারী অন্য সত্তাটি নির্বাচন করে: $ ("# পিরিওডো-ধারক") show শো (); $ ('# পিরিয়ডো')। প্রপ ('প্রয়োজনীয়', সত্য);

তবে কখনও কখনও, যখন ফর্মটি জমা দেওয়া হয়, তখন বিষয়টি ইস্যু হয়: "নাম = পিরিওডো 'সহ একটি অবৈধ ফর্ম নিয়ন্ত্রণ মনোযোগ দিতে পারে না (আইডি এবং নামের জন্য আমি একই মান ব্যবহার করছি)।

এই সমস্যাটি সমাধানের জন্য, আপনাকে অবশ্যই নিশ্চিত করতে হবে যে আপনি 'প্রয়োজনীয়' সেট করছেন বা মুছে ফেলছেন এমন ইনপুট সর্বদা দৃশ্যমান।

সুতরাং, আমি যা করেছি তা হ'ল:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

আমার সমস্যা সমাধান করেছে ... অবিশ্বাস্য।

Answer 17

আমার ক্ষেত্রে..

ng-showব্যবহার করা হচ্ছে।
ng-ifতার জায়গায় স্থাপন করা হয়েছিল এবং আমার ত্রুটিটি স্থির করে দেওয়া হয়েছিল।

Comments

আমার দিন বাঁচিয়েছে ধন্যবাদ

— সৈয়দ আতির মহিউদ্দিন

Answer 18

কৌণিক ব্যবহারের জন্য:

NG-প্রয়োজনীয় = "বুলিয়ান"

মানটি সত্য হলে এটি কেবল html5 'প্রয়োজনীয়' বৈশিষ্ট্য প্রয়োগ করবে।

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

Answer 19

আমি এখানে উত্তর দেওয়ার জন্য এসেছি যে </form>ট্যাগটি বন্ধ না করার এবং একই পৃষ্ঠায় একাধিক ফর্ম রাখার ভিত্তিতে আমি নিজেই এই সমস্যাটি ট্রিগার করেছি । প্রথম ফর্মটি অন্য কোথাও থেকে ফর্ম ইনপুটগুলিতে বৈধতা চাওয়ার অন্তর্ভুক্ত করবে। যেহেতু THOSE ফর্মগুলি লুকানো আছে, তারা ত্রুটিটি ট্রিগার করেছিল।

উদাহরণস্বরূপ:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

ট্রিগারসমূহ

নাম = 'ইউজারআইডি' সহ একটি অবৈধ ফর্ম নিয়ন্ত্রণ ফোকাসযোগ্য নয়।

নাম = 'পাসওয়ার্ড' সহ একটি অবৈধ ফর্ম নিয়ন্ত্রণ ফোকাসযোগ্য নয়।

নাম = 'নিশ্চিতকরণ' সহ একটি অবৈধ ফর্ম নিয়ন্ত্রণ মনোনিবেশযোগ্য নয়।

Answer 20

এটিকে ঠিক করার অনেকগুলি উপায় রয়েছে

1. আপনার ফর্মটিতে অযৌক্তিক যুক্ত করুন তবে এটি সম্পূর্ণরূপে ভুল কারণ এটি ফর্মের বৈধতা সরিয়ে ফেলবে যা ব্যবহারকারীদের দ্বারা প্রবেশ করা ভুল তথ্যের দিকে পরিচালিত করবে।

<form action="...." class="payment-details" method="post" novalidate>

2. ব্যবহার প্রয়োজনীয় ক্ষেত্রগুলি থেকে প্রয়োজনীয় বৈশিষ্ট্যটি সরিয়ে ফেলতে পারে যা এটিও ভুল কারণ এটি আবার ফর্মের বৈধতা মুছে ফেলবে।

   এর পরিবর্তে:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

3. আপনি যখন অন্য কোনও বিকল্পের পরিবর্তে ফর্মটি জমা দিতে যাবেন না তখন প্রয়োজনীয় প্রয়োজনীয় ক্ষেত্রগুলি অক্ষম করতে পারে। এটি আমার মতে প্রস্তাবিত সমাধান।

   মত:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

অথবা জাভাস্ক্রিপ্ট / জ্যাকোয়ারি কোডের মাধ্যমে এটি অক্ষম করুন আপনার দৃশ্যের উপর নির্ভর করে।

Answer 21

অ্যাংুলার জেএস ব্যবহার করার সময় আমি একই সমস্যা পেয়েছি। এটি এনজি-হাইডের সাথে একসাথে প্রয়োজনীয় ব্যবহার করার কারণে ঘটেছিল । আমি যখন এই উপাদানটি গোপন করার সময় সাবমিট বাটনে ক্লিক করি তখন ত্রুটিটি ঘটেছে নাম = '' সহ একটি অবৈধ ফর্ম নিয়ন্ত্রণ ফোকাসযোগ্য নয়। পরিশেষে!

উদাহরণস্বরূপ এনজি-হাইড একসাথে প্রয়োজনীয় ব্যবহারের জন্য:

<input type="text" ng-hide="for some condition" required something >

পরিবর্তে এনজি-প্যাটার্ন দিয়ে প্রয়োজনীয়টি প্রতিস্থাপন করে আমি এটি সমাধান করেছি।

সমাধান উদাহরণস্বরূপ:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

Answer 22

অন্য আঙ্গুলারজেএস ১.x ব্যবহারকারীদের জন্য, এই ত্রুটিটি উপস্থিত হয়েছিল কারণ আমি যখন সম্পূর্ণরূপে নিয়ন্ত্রণের প্রয়োজন হয় না তখন পুরোপুরি ডম থেকে সরিয়ে ফেলার পরিবর্তে প্রদর্শিত হতে কোনও ফর্ম নিয়ন্ত্রণটি আড়াল করি।

আমি বৈধকরণের প্রয়োজন ফর্ম নিয়ন্ত্রণযুক্ত ডিভের ng-ifপরিবর্তে ng-show/ ng-hideডিভ ব্যবহার করে এটি স্থির করেছি ।

আশা করি এটি আপনার সহযোগী এজ ব্যবহারকারীদের সহায়তা করবে।

Answer 23

উপরের সমস্ত সমাধান থেকে এটি পৃথক হওয়ায় আমার কেসটি সম্পর্কে আমার বক্তব্য রাখি। আমার একটি এইচটিএমএল ট্যাগ ছিল যা সঠিকভাবে বন্ধ ছিল না। উপাদানটি ছিল না required , তবে এটি একটি hiddenডিভিডে এমবেড করা হয়েছিল

আমার ক্ষেত্রে সমস্যাটি ছিল type="datetime-local", যা ছিল কিছু কারণের জন্য - ফর্ম জমা দেওয়ার সময় যাচাই করা হয়েছিল।

আমি এই পরিবর্তন করেছি

<input type="datetime-local" />

যে মধ্যে

<input type="text" />

Answer 24

আমি এখানে উত্তর দিতে চেয়েছিলাম কারণ এই উত্তরগুলির কোনও নয়, বা অন্য কোনও গুগল ফলাফল আমার জন্য সমস্যাটি সমাধান করেছে।

আমার জন্য এটি ফিল্ডসেট বা লুকানো ইনপুটগুলির সাথে কোনও সম্পর্ক রাখেনি।

আমি খুঁজে পেয়েছি যে আমি যদি max="5"(উদাহরণস্বরূপ) ব্যবহার করি তবে এটি এই ত্রুটিটি তৈরি করে। যদি আমি ব্যবহার করি maxlength="5" ... ত্রুটি নেই।

আমি বেশ কয়েকবার ত্রুটি এবং ত্রুটিটি পরিষ্কার করার পুনরায় উত্পাদন করতে সক্ষম হয়েছি।

আমি এখনও জানি না কেন সেই কোডটি ব্যবহার করা ত্রুটি সৃষ্টি করে, যতদূর এই হিসাবে বলা হয়েছে এটি বৈধ হওয়া উচিত, এমনকি আমার বিশ্বাস "মিনিট" ছাড়াই।

Comments

খনিটি একইভাবে সমাধান করা হয়েছিল তবে কনফিগারেশনটি ছিল min='-9999999999.99' max='9999999999.99'।

— রিকার্ডো সবুজ

Answer 25

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

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome ফোকাস করার জন্য কোনও খালি, লুকানো এবং প্রয়োজনীয় উপাদান খুঁজে পাবে না। সরল সমাধান।

আশা করি এইটি কাজ করবে. আমি এই সমাধানটি সম্পূর্ণরূপে বাছাই করেছি।

Answer 26

আমি এখানে একই সমস্যা নিয়ে এসেছি। আমার জন্য (প্রয়োজন হিসাবে লুকানো উপাদানগুলি ইনজেক্ট করা - অর্থাত্ একটি কাজের অ্যাপ্লিকেশনটিতে শিক্ষা) এর জন্য প্রয়োজনীয় পতাকা ছিল।

আমি যেটা বুঝতে পেরেছি তা হল যে ডকুমেন্টটি প্রস্তুত হওয়ার চেয়ে ভেরিডিটারটি ইনজেকশনের উপর দ্রুত গুলি চালছিল, সুতরাং এটি অভিযোগ করেছিল।

আমার মূল এনজি-প্রয়োজনীয় ট্যাগটি দৃশ্যমানতা ট্যাগটি ব্যবহার করছিল (vm.flags.hasHighSchool)।

প্রয়োজনীয় এনজি-প্রয়োজনীয় = "vm.flags.highSchoolRequired == সত্য" সেট করার জন্য আমি একটি উত্সর্গীকৃত পতাকা তৈরি করে সমাধান করেছি

আমি পতাকাটি সেট করার জন্য একটি 10 ​​মাইলের কলব্যাক যুক্ত করেছি এবং সমস্যাটি সমাধান করা হয়েছে।

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

এইচটিএমএল:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

Comments

আপনার সমাধানটি আসলে খুব ঝুঁকিপূর্ণ। ধীর সিপিইউ সহ যে কেউ এখনও ত্রুটি পাবে। এটি (বা হবে) টিপিকাল রেসের শর্ত। সম্ভবত পুরানো স্মার্টফোনগুলি প্রভাবিত হতে পারে। সুতরাং দয়া করে এই সমাধানটি সম্পর্কে সতর্ক হন।

— ড্র্যাচেনফেলস

Answer 27

প্রয়োজনীয় বৈশিষ্ট্যযুক্ত আপনার ফর্মের সমস্ত কন্ট্রোলেরও নাম অ্যাট্রিবিউট সেট রয়েছে তা নিশ্চিত করুন

Answer 28

এই ত্রুটিটি আমার কাছে ঘটেছিল কারণ আমি প্রয়োজনীয় ক্ষেত্রগুলি পূরণ করে নি এমন একটি ফর্ম জমা দিচ্ছিলাম।

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

ঠিক করতে, নিশ্চিত হয়ে নিন যে আপনি প্রয়োজনীয় ক্ষেত্রগুলি পূরণ করেছেন।

Answer 29

এটি কারণ ফর্মটিতে প্রয়োজনীয় বৈশিষ্ট্য সহ একটি লুকানো ইনপুট রয়েছে।

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

সুতরাং, আমি এটি নীচের সিএসএস কৌশল ব্যবহার করে ঠিক করেছি:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

Answer 30

কোনও ফর্মে ব্যবহারের জন্য এইচটিএমএল উপাদান ক্লোন করার সময় আমি একই ত্রুটি পেয়েছি।

(আমার একটি আংশিক সম্পূর্ণ ফর্ম রয়েছে, এটিতে একটি টেম্পলেট ইনজেকশন রয়েছে এবং তারপরে টেমপ্লেটটি সংশোধন করা হয়েছে)

ত্রুটিটি মূল ক্ষেত্রটি উল্লেখ করেছিল, এবং ক্লোন করা সংস্করণ নয়।

বৈধতা চালানোর আগে আমি এমন কোনও পদ্ধতি খুঁজে পাচ্ছি না যা ফর্মটিকে নিজেরাই পুনরায় মূল্যায়ন করতে বাধ্য করবে (এই আশায় এটি বৈধতা চালানোর আগে পুরানো ক্ষেত্রগুলির কোনও রেফারেন্স থেকে মুক্তি পাবে))

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