ফায়ারফক্স 4: কোনও প্রয়োজনীয় ফর্ম ইনপুটটিতে লাল সীমানা সরানোর কোনও উপায় আছে?

Question

যখন প্রয়োজন হয় একটি ফর্ম ক্ষেত্রে সংজ্ঞায়িত করা হয়, ফায়ারফক্স 4 স্বয়ংক্রিয়ভাবে এই উপাদানটির একটি লাল সীমানা দেখায়, এমনকি ব্যবহারকারী সাবমিট বোতামটি হিট করে।

<input type="text" name="example" value="This is an example" required />

আমি মনে করি এটি ব্যবহারকারীর পক্ষে ঝামেলা করছে কারণ তিনি শুরুতে ভুল করেন নি।

আমি প্রাথমিক অবস্থার জন্য সেই লাল সীমানাটি লুকিয়ে রাখতে চাই না, তবে ব্যবহারকারী যদি প্রেরণ বোতামটি হিট করে তবে প্রয়োজন অনুসারে কোনও অনুপস্থিত ক্ষেত্র চিহ্নিত আছে।

আমি নতুন সিউডো সিলেক্টরের দিকে :requiredএবং তার :invalidকাছ থেকে দেখেছি , তবে পরিবর্তনগুলি বৈধতার আগে এবং পরে রয়েছে । ( ফায়ারফক্স 4 থেকে প্রয়োজনীয় ইনপুট ফর্মের রেড বর্ডার / আউটলাইন থেকে )

ব্যবহারকারী ফর্মটি জমা দেওয়ার আগে লাল সীমানাটি অক্ষম করার কোনও উপায় আছে এবং এখানে কিছু অনুপস্থিত ক্ষেত্র রয়েছে কিনা তা দেখানোর জন্য কি আছে?

Comments

রূপরেখা সম্পর্কে কীভাবে: 0; ?

— এস

Answer 1

এটি কিছুটা জটিল ছিল তবে আমি এই অস্তিত্ব নির্ধারণ করেছি: http://jsfiddle.net/c5aTe/ যা আমার পক্ষে কাজ করছে। মূলত কৌতুকটি মনে হচ্ছে প্লেসমোল্ডারের পাঠ্য থাকা অবৈধ যা অবৈধ। অন্যথায় আপনি এটি করতে সক্ষম হবেন:

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

বা অনুরূপ কিছু ...

তবে যেহেতু এফএফ 4 আপনার স্থানধারক পাঠ্যটিকে বৈধতা দেওয়ার সিদ্ধান্ত নিয়েছে (কেন কোনও ধারণা নেই ...) ফ্রিডલમાં সমাধান (সামান্য হ্যাকি - ব্যবহারগুলি !important) প্রয়োজন।

আশা করি এইটি কাজ করবে!

সম্পাদনা

দোহ !! - আমি ভাল বোকা লাগছে। আমি আমার ফিডল আপডেট করেছি: http://jsfiddle.net/c5aTe/2/ - আপনি :focusসিউডো ক্লাসটি ব্যবহার করে টাইপ করার সময় এমন উপাদানকে বৈধ রাখার জন্য ব্যবহার করতে পারেন typ আইটেমটি ফোকাস হারিয়ে ফেললে বিষয়বস্তুটি অবৈধ হলে এটি এখনও লাল রঙে হাইলাইট করবে তবে আমি মনে করি যে আপনি নকশা করা আচরণটি করতে পারবেন কেবল তেমন অনেক কিছুই ...

এইচটিএইচ :)

---

গ্রহণের পরে সম্পাদনা করুন:

ওপির অনুরোধে উদাহরণগুলির সংক্ষিপ্তসার (নোট করুন প্রথম দুটি কেবল এফএফ 4 এর জন্য ডিজাইন করা হয়েছে - ক্রোম নয় )

1. আপনার স্থানধারক পাঠ্যটিকে বৈধতা দেওয়ার জন্য এফএফের জন্য স্থির করুন: http://jsfiddle.net/c5aTe/
2. আপনি টাইপ করার সাথে সাথে এফএফ যাচাইয়ের জন্য ঠিক করুন: http://jsfiddle.net/c5aTe/2
3. জেএস সমাধান টগলিং শৈলী / বৈধতা: http://jsfiddle.net/c5aTe/4

Comments

দুর্দান্ত অগ্রগতি, তবে "অবৈধ" ত্রুটিটি প্রদর্শিত হবে বলে মনে হয় যখন ব্যবহারকারী ইনপুটটি>> ইনপুটটি খালি থাকাকালীন ক্লিক করে, তার আগে সে আসলে কিছু লিখবে। তবে সম্ভবত আমি যা চাই তা এফএফ 4-র একটি বাগ যা সমাধান করা যায় না: /

— এন।

তবে ভয়ঙ্কর লাল বাক্সের ছায়া সীমাবদ্ধ করার জন্য আপনার পথের জন্য +1 :)

— সাইরিল এন।

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

— স্টুয়ার্ট বুরোজ

প্রাতঃরাশের সময় কিছুটা অনুপ্রেরণা ছিল - উপরে যুক্ত!

— স্টুয়ার্ট বুরোজ

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

— সিরিল এন।

Answer 2

ফায়ারফক্স ২ 26 অনুসারে, অবৈধ প্রয়োজনীয় ক্ষেত্রগুলি সনাক্ত করতে প্রকৃত সিএসএসটি নিম্নরূপ (ফর্মস সিএস থেকে এসেছে):

:not(output):-moz-ui-invalid {
    box-shadow: 0 0 1.5px 1px red;
}

অন্যান্য ব্রাউজারে অনুলিপি করতে, আমি ব্যবহার করি:

input:invalid {
    box-shadow: 0 0 1.5px 1px red;
}

আমি পিক্সেল সেটিংসের সাথে প্রায় খেলেছি তবে মোজ উত্সটি না দেখে আমি কখনও 1.5px অনুমান করতে পারি না।

এটি অক্ষম করতে, আপনি ব্যবহার করতে পারেন:

input:invalid {
    box-shadow: none;
}

Comments

ছোট নির্ভুলতা: যারা এটি পছন্দ করেছেন তাদের ক্ষেত্রে এটি হওয়া উচিত :not(output):-moz-ui-invalidনয় input:not(output):-moz-ui-invalid।

— স্কুয়া

আপনি একটি পরম কিংবদন্তি।

— অ্যাজেজডানিয়েলস

Answer 3

চেষ্টা করুন:

document.getElementById('myform').reset();

Comments

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

— ড্যানিয়েল উ

Answer 4

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

:required {
    border-color: rgba(82, 168, 236, 0.8);
}

Answer 5

এটি আমার পক্ষে ভাল কাজ করেছে:

input:invalid {
     -moz-box-shadow: none;
}

Comments

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

— সিরিল এন।

Answer 6

দয়া করে এটি চেষ্টা করুন,

"(" ফর্ম ") att

আপনার গ্লোবাল .js ফাইল বা শিরোনাম বিভাগে আপনার ফর্মের জন্য।

Answer 7

কমপক্ষে বেশিরভাগ ক্ষেত্রে সমস্যাটি সমাধান করার একটি উপায় আমি পেয়েছি:

<input type="text" name="example" value="This is an example" onInput="this.required = true;" />

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