JQuery বৈধতা প্লাগইন ব্যবহার করে রেডিও বোতাম গ্রুপের বৈধতা

Question

JQuery বৈধতা প্লাগইন ব্যবহার করে কীভাবে কোনও রেডিও বোতাম গোষ্ঠীর (একটি রেডিও বোতাম নির্বাচন করা উচিত) বৈধতা সম্পাদন করবেন?

Comments

ফোরাম.জ্যাকারি. com

আউট একটি নতুন jQuery বৈধকারক যা খুব পাওয়ারফুল এবং সহজেই ব্যবহারযোগ্য। : আপনি এটি চেক আউট করতে পারেন code.google.com/p/bvalidator

— Nenad

— এটির

Answer 1

Jquery এর নতুন রিলিজের সাথে (1.3+ আমি মনে করি), আপনাকে যা করতে হবে তা রেডিও সেটগুলির যে কোনও একটি সদস্যকে প্রয়োজনীয় সেট করতে হবে এবং jquery বাকীটির যত্ন নেবে:

<input type="radio" name="myoptions" value="blue" class="required"> Blue<br />
<input type="radio" name="myoptions" value="red"> Red<br />
<input type="radio" name="myoptions" value="green"> Green

উপরের দিকে 3 টি বেতার বিকল্পের মধ্যে কমপক্ষে 1 টির প্রয়োজন হবে ডাব্লু / অগ্রসর হওয়ার আগে "আমার বিকল্পগুলি" নাম নির্বাচন করা উচিত।

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

Comments

এটি এখন jQuery- এর আপডেটগুলির সাথে আমার সেরা উত্তর। +1 টি।

— কায়রান অ্যান্ড্রুজ

এটির সাথে একমাত্র সমস্যাটি যখন তাদের কোনওটি না পরীক্ষা করা হয়, jQuery বৈধতাটি প্রথম রেডিও বোতামটি লাল রঙে হাইলাইট করে তবে বাস্তবে আপনি সম্ভবত তাদের সমস্তটি হাইলাইট করতে চান। এছাড়াও, একবার আপনি কোনও রেডিও বোতাম চেক করলে, লালটি চলে যাওয়া উচিত।

— এপ্রিলকে হ্যাক করা হয়েছে

@ হ্যাকড আপনি ত্রুটি বার্তাটি অর্থবহ কোনও জায়গায় রাখার জন্য বৈধতা বিকল্পগুলিতে ত্রুটি-প্রতিস্থাপন কলব্যাক ফাংশনটি ব্যবহার করতে পারেন?

— স্বায়ত্তশক্তি

@ হ্যাকড: বিকল্পগুলিতে যুক্ত focusInvalid: falseকরা validate()প্রথম রেডিও বোতামটি হাইলাইট করা রোধ করবে।

— জিম মিলার

আমি সর্বদা এটি এইভাবে করি এবং ত্রুটি স্থান পরিবর্তন ফাংশনে ত্রুটি লেবেলটি অবস্থান করি। এটি আমি রেডিও বোতামগুলির জন্য যা করি: যদি (এলিমেন্ট.ইস ("ইনপুট: রেডিও")) .in error.insertAfter (এলিমেন্ট.পিতা ()); .in অন্য {error.insertAfter (উপাদান); ।

— ফ্রান্সিসকো গোল্ডেনস্টেইন

Answer 2

রেডিও বোতাম গ্রুপ নির্বাচন যাচাই করার জন্য নিম্নলিখিত নিয়মটি ব্যবহার করুন

myRadioGroupName : {required :true}

myRadioGroupName হল সেই মানটি যা আপনি নামের গুণকে দিয়েছিলেন

Comments

মনে রাখবেন যে আপনি যদি লেবেলের অবস্থানটি নিয়ন্ত্রণ করতে চান তবে আপনি নিজের পছন্দ মতো পাঠ্যটি যেখানে চান তা নিজের ত্রুটি লেবেল সরবরাহ করতে পারেন: <লেবেল = "মাইআরডিওগ্রুপনেম" শ্রেণি = "ত্রুটি" শৈলী = "প্রদর্শন: কিছুই নয়; "> একটি বেছে নিন দয়া করে </ ট্যাগ>।

— টম

@ labelত্রুটির জন্য ট্যাগ লেখার পক্ষে এটি বেহুদা , আসলে প্লাগইন স্বয়ংক্রিয়ভাবে এই ত্রুটি লেবেল ট্যাগ যুক্ত করে।

— আহেমেরি

বরং অনেক দিন আগে, তবে আমি কল্পনা করেছিলাম যে আমি যা করার চেষ্টা করছিলাম সেটি হল প্লাবনটি স্বয়ংক্রিয়ভাবে তৈরি হওয়ার পরিবর্তে << লেবেল> ডিওমে অন্য কোথাও স্থাপন করা। এছাড়াও, প্লাগিনের আচরণটি গত 5 বছরে পরিবর্তিত হওয়া বেশ সম্ভব ...

— টম

কাস্টম ত্রুটির জন্য এখানে "টাইপ" এর পরিবর্তে কীভাবে "নাম" প্রয়োজন তা দু: খিত।

— justdan23

Answer 3

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

<fieldset>
<input type="radio" name="myoptions[]" value="blue"> Blue<br />
<input type="radio" name="myoptions[]" value="red"> Red<br />
<input type="radio" name="myoptions[]" value="green"> Green<br />
<label for="myoptions[]" class="error" style="display:none;">Please choose one.</label>
</fieldset>

এবং কেবল এই নিয়ম যুক্ত করুন

rules: {
 'myoptions[]':{ required:true }
}

কীভাবে বিধি যুক্ত করতে হবে তা উল্লেখ করুন।

Comments

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

— আর্মিফডিয়া

নামের বৈশিষ্ট্য এবং আইডি বৈশিষ্ট্যের মধ্যে একটি বিগ পার্থক্য রয়েছে।

— নর্মান এইচ

দয়া করে মনে রাখবেন না যে কোনও রেডিও বোতামটি কেবল একটি মানই ফিরিয়ে আনতে পারে, name="myoptions[]"এটির জন্য কিছুটা বিভ্রান্তিকর কারণ এটি ইঙ্গিত দেয় যে একাধিক মান ফেরত যেতে পারে।

— ডেমেন্টিক

ত্রুটির বার্তাটি উপরে রাখে। <স্টাইল> .আডিও-গ্রুপ {অবস্থান: আপেক্ষিক; মার্জিন টপ: 40px; my # মায়োপশন-ত্রুটি {অবস্থান: পরম; শীর্ষ: -25px; } </style> <ডি ক্লাস = "রেডিও-গ্রুপ"> <ইনপুট টাইপ = "রেডিও" নাম = "মায়োপশনস" মান = "নীল" শ্রেণি = "প্রয়োজনীয়"> নীল <br /> <ইনপুট টাইপ = "রেডিও" নাম = "মায়োপশনস" মান = "লাল"> লাল <br /> <ইনপুট টাইপ = "রেডিও" নাম = "মায়োপেশন" মান = "সবুজ"> সবুজ </ div> </div> <! - শেষ রেডিও- গোষ্ঠী ->

— সোনোবর

Answer 4

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

<span class="field-validation-valid" data-valmsg-for="color" data-valmsg-replace="true"></span>
<p><input type="radio" name="color" id="red" value="R" data-val="true" data-val-required="Please choose one of these options:"/> <label for="red">Red</label></p>
<p><input type="radio" name="color" id="green" value="G"/> <label for="green">Green</label></p>
<p><input type="radio" name="color" id="blue" value="B"/> <label for="blue">Blue</label></p>

Answer 5

বৈধতা দেওয়ার অন্য একটি উপায় এটি।

var $radio = $('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");

আমি আশা করি আমার উদাহরণ আপনাকে সাহায্য করবে

Answer 6

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

        'highlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").addClass(errorClass);
                    $(this).addClass(errorClass);
                });
            } else {
                $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
                $(element).addClass(errorClass);
            }
        },
        'unhighlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").removeClass(errorClass);
                    $(this).removeClass(errorClass);
                });
            }else {
                $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                $(element).removeClass(errorClass);
            }
        },

Answer 7

রেডিও বোতামের জন্য কোড -

<div>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Female",false) Female</span>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Male",false) Male</span>                                                        
<div class='GenderValidation' style="color:#ee8929;"></div>    
</div> 

<input class="btn btn-primary" type="submit" value="Create" id="create"/>

এবং jQuery কোড-

<script>
    $(document).ready(function () {
        $('#create').click(function(){

            var gender=$('#Gender').val();
            if ($("#Gender:checked").length == 0){
                $('.GenderValidation').text("Gender is required.");
                return false;
            }
        });
    });
</script>

Answer 8

ত্রুটির বার্তাটি উপরে রাখে।

   <style> 

 .radio-group{ 
      position:relative; margin-top:40px; 
 } 

 #myoptions-error{ 
     position:absolute; 
     top: -25px; 
  } 

 </style> 

 <div class="radio-group"> 
 <input type="radio" name="myoptions" value="blue" class="required"> Blue<br /> 
 <input type="radio" name="myoptions" value="red"> Red<br /> 
 <input type="radio" name="myoptions" value="green"> Green </div>
 </div><!-- end radio-group -->