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



html5 validation (20)

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

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

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

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

মনে হচ্ছে এই ত্রুটিটি র্যান্ডম কে মনে করে। এই জন্য একটি সমাধান জানেন যে কেউ আছে?

https://ffff65535.com


Angular JS ব্যবহার করার সময় আমি একই সমস্যা পাওয়া যায়। এটি ng-hide সঙ্গে একসাথে প্রয়োজন ব্যবহার করে সৃষ্ট হয়েছিল। এই উপাদানটি লুকানো অবস্থায় আমি জমা দেওয়ার বোতামে ক্লিক করলে এটি ত্রুটি ঘটেছে নাম = '' এর সাথে একটি অবৈধ ফর্ম নিয়ন্ত্রণ ফোকাসযোগ্য নয়। পরিশেষে!

প্রয়োজনীয় সঙ্গে এনজি-লুক ব্যবহার করে উদাহরণস্বরূপ:

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

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

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

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

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

আমি ng-show ব্যবহার করে এইটি সংশোধন করে প্রয়োজনীয় ng-if সাথে ng-show / ng-hide ng-show ব্যবহার করে সংশোধন করেছি।

এই আপনি সহকর্মী প্রান্ত কেস ব্যবহারকারীদের সাহায্য আশা করি।


আপনার form , আপনার required বৈশিষ্ট্য থাকতে পারে এমন লুকানো input থাকতে পারে:

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

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


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

যেমন

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

এই কাজ করতে হবে।

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


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

visibility: hidden;

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

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

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


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

ng-show ব্যবহার করা হচ্ছে।
ng-if তার জায়গায় রাখা এবং আমার ত্রুটি সংশোধন করা হয়েছে।


আমার দৃশ্যকল্প আমি উত্তর এই দীর্ঘ বীজ মধ্যে মিস অনুপস্থিত কিছু সত্যিই বিজোড় ছিল।

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

সংক্ষেপে ডিভিড আইডি ছিল

<div id="name${instance.username}"/>

আমার একটি ব্যবহারকারী ছিল: 测试 帐户 এবং কিছু কারণে এনকোডিং জাভা স্ক্রিপ্ট বিশ্বের কিছু অদ্ভুত উপাদান করেছে। আমি অন্য জায়গায় কাজ একটি ফর্ম জন্য এই ত্রুটি বার্তা পেয়েছিলাম।

এইটিকে সংহত করুন এবং সংখ্যাসূচক সংখ্যাগুলি ব্যবহার করার পরিবর্তে একটি আইডি যেমন আইডি ইস্যুটি সমাধান করতে বলে।


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

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

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

ট্রিগারসমূহ

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

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

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


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

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

সম্পাদনা:

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

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

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

    // Submit and hide form safely
  }

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

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


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

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

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


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

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

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

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

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


এটা রাষ্ট্র যথেষ্ট নয়

ফর্ম একটি novalidate বৈশিষ্ট্য যোগ করা সাহায্য করবে

এটি সমস্যাটির ব্যাখ্যা দেয় না এবং এটি হয়তো বুঝতে পারে না কেন এটি সাহায্য করবে, অথবা এটি যদি সত্যিই সহায়ক হয়।

Here এমন একটি উত্তর যা সত্যই কেসটি ব্যাখ্যা করে, সমস্যাটি বোঝার ফলে আপনার উন্নয়নের জন্য উপযুক্ত একটি সমাধান এ পৌঁছাতে সক্ষম হওয়া উচিত:

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

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

ভাল ব্যবহারে সতর্কতা অবলম্বন করার জন্য, এটি বিবেচনা করুন - যখন এটি যাচাইকরণ ব্যর্থ হয় তখন একটি ক্ষেত্র লুকান না । কিন্তু এটি একটি কঠোর নিয়ম নয়, এটি কোনও নিয়ম নয়। আমি নীচের আমার মন্তব্য উল্লেখ, আমি paraphrase

কিছু ক্ষেত্রে, সমস্যাটি কোনও সমস্যা নয় এবং অ্যাপ্লিকেশনটিতে কার্যকারিতা হ্রাস করে না। তারপর ভুল সম্ভবত উপেক্ষা করা হবে।

আপডেট: ২1 আগস্ট, ২015

একটি ত্রুটিকালীন বৈধতা কারণে প্রশ্ন ত্রুটি হতে পারে। আপনি একটি সেট টাইপ বৈশিষ্ট্য ছাড়া <button> ইনপুট আছে যখন প্রারম্ভিক বৈধতা ঘটতে পারে। বোতামে সেট করা একটি বোতামের বৈশিষ্ট্যের বৈশিষ্ট্য ছাড়া, Chrome (বা যে কোনও অন্যান্য ব্রাউজার) বোতামটি ক্লিক করার সময় প্রতিটি সময় একটি বৈধতা সঞ্চালন করে কারণ জমাটি ডিফল্ট ধরণের বোতাম। সমস্যা সমাধানের জন্য, যদি আপনার পৃষ্ঠার একটি বোতাম থাকে যা জমা দেওয়ার বা রিসেট করার মতো অন্য কিছু করে তবে সর্বদা এটি মনে রাখবেন: <button type="button">


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

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

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

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

সুতরাং, আমি কি করেছি:

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

Thats আমার সমস্যা সমাধান ... অবিশ্বাস্য।


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

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

সুতরাং, আমি নিচের CSS টিসিটি ব্যবহার করে এটি সংশোধন করেছি:

  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;

 }

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


ফর্ম একটি novalidate বৈশিষ্ট্য যোগ করা সাহায্য করবে:

<form name="myform" novalidate>

যদি অন্য কেউ এই সমস্যা আছে, আমি একই জিনিস অভিজ্ঞতা। মতামত হিসাবে আলোচনা, এটা লুকানো ক্ষেত্র যাচাই করার চেষ্টা ব্রাউজার কারণে ছিল। এটি ফরমের খালি ক্ষেত্র খুঁজে পেয়েছিল এবং তাদের উপর ফোকাস করার চেষ্টা করেছিল, কিন্তু কারণ তারা display:none; করার জন্য সেট ছিল 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.
});

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


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


শুধু নির্দিষ্ট করার required , min এবং max উদাহরণ ব্যবহার করেও আমি এই সমস্যাটি পেয়েছি

<input type="number" min="1900" max="2090" />

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


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





validation