jQuery বৈধতা নির্বাচন করুন


146

আমি jQuery বৈধতা প্লাগইন ব্যবহার করে এইচটিএমএল নির্বাচন উপাদানকে বৈধতা দেওয়ার চেষ্টা করছি। আমি "প্রয়োজনীয়" বিধিটিকে সত্যে সেট করেছিলাম তবে এটি সর্বদা বৈধতা দিয়ে যায় কারণ শূন্য সূচকটি ডিফল্টরূপে বেছে নেওয়া হয়। প্রয়োজনীয় নিয়ম দ্বারা খালি মূল্য সংজ্ঞায়িত করার কোনও উপায় আছে কি?

UPD। উদাহরণ। কল্পনা করুন যে আমাদের নীচের এইচটিএমএল নিয়ন্ত্রণ রয়েছে:

<select>
  <option value="default">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

আমি চাইছি বৈধতা প্লাগইনটি "ডিফল্ট" মানটি খালি হিসাবে ব্যবহার করে।


কিছু কোড স্নিপেট রাখুন যাতে আমরা সহায়তা করতে পারি।
লি

সম্ভাব্য প্রতিলিপির: stackoverflow.com/questions/1271640/jquery-validate-select-box
cregox

উত্তর:


213

আপনি নিজের নিয়ম লিখতে পারেন!

 // add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

1
আপনি মানটির পরিবর্তে বাছাইকৃত পাঠ্যটি পরীক্ষা করতে পারেন:$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg.");
পাবলো এসজি পাচেকো

11
ভবিষ্যতের পাঠকদের সহায়তার জন্য: যেখানে সিলেক্টনাম বলা হয়েছে তার অর্থ নামের অ্যাট্রিবিউটের মান এবং আইডি বৈশিষ্ট্যের মান নয় of এটি কিছুটা বিভ্রান্তিকর যেহেতু জেএসে কাজ করার সময় একজন সাধারণত আইডিতে কাজ করে না নামটি দিয়ে। ডকুমেন্টেশন এখানে দেখুন : "বিধিগুলি (ডিফল্ট: নিয়মগুলি মার্কআপ থেকে পাঠ করা হয় (শ্রেণি, বৈশিষ্ট্য, ডেটা)) প্রকার: কাস্টম বিধিগুলি সংজ্ঞায়িত করার কী / মান জোড়গুলি। কী একটি উপাদানের নাম "
ডরার

239

একটি সহজ সমাধান এখানে বর্ণিত হয়েছে: নির্বাচন বাক্স বৈধ করুন id

মানটি ফাঁকা রাখুন এবং প্রয়োজনীয় বৈশিষ্ট্য যুক্ত করুন

<select id="select" class="required">
<option value="">Choose an option</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

11
সবসময় সম্ভব বা wishable না - কিন্তু আপনি আপনার বিকল্প একটি খালি মান দিতে হবে
Muleskinner

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

3
@ ম্যাসনহাউটজ এখনও মার্কআপে এটি যুক্তিযুক্ত কিনা, যুক্তিটি মান = "" বা মান = "ডিফল্ট" প্রত্যাশা করে কিনা
বিলিচার্ডস


30

ন্যূনতম নিয়ম ব্যবহার করুন

প্রথম বিকল্পের মান 0 তে সেট করুন

'selectName':{min:1}

প্রথম মানটি ঠিক করা হয়েছে (এই মানটির বিরুদ্ধে কিছু ব্যাকেন্ড যুক্তি রয়েছে)
সাইবেরিয়ানগুই

9

আপনাকে কেবল validate[required]এই নির্বাচনের শ্রেণি হিসাবে স্থাপন করতে হবে এবং তারপরে মান = "" সহ একটি বিকল্প স্থাপন করতে হবে

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

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

7

প্রশ্নটি জিজ্ঞাসা করার সময় প্লাগইনটি কেমন ছিল তা আমি জানি না (2010) তবে আমি আজ একই সমস্যার মুখোমুখি হয়েছি এবং এইভাবে সমাধান করেছি:

  1. আপনার নির্বাচিত ট্যাগটিকে একটি নাম গুণ দিন। এই ক্ষেত্রে উদাহরণস্বরূপ

    <select name="myselect">

  2. ট্যাগ বিকল্পে গুণমান = "ডিফল্ট" এর সাথে কাজ করার পরিবর্তে অ্যান্ড্রু কোটস দ্বারা প্রস্তাবিত ডিফল্ট বিকল্পটি সেট করুন বা মান = "" সেট করুন

    <option disabled="disabled">Choose...</option>

    অথবা

    <option value="">Choose...</option>

  3. প্লাগইন বৈধতা নিয়ম সেট করুন

    $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

    অথবা

    <select name="myselect" class="required">

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

আশা করি এটা সাহায্য করবে! :)


1
সংক্ষেপে, যোগ requiredকরার অ্যাট্রিবিউট <select>ট্যাগ এবং যোগ disabledপ্রথমে অ্যাট্রিবিউট <option>ট্যাগ (বা সঙ্গে এক selectedবৈশিষ্ট্য যদি কেউ থাকে)
স্টিফেন

4

এখানে সহজ এবং বোধগম্য উদাহরণ:

   <select class="design" id="sel" name="subject">
        <option value="0">- Please Select -</option>
        <option value="1"> Example1 </option>
        <option value="2"> Example2 </option>
        <option value="3"> Example3 </option>
        <option value="4"> Example4 </option>
   </select>

    <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

    <input type="submit" name="sub" value="Gönder" class="">

জিকুয়েরি:

jQuery(function() {  

jQuery('.error').hide(); // Hide Warning Label. 

jQuery("input[name=sub]").on("click", function() {

   var returnvalue;

   if(jQuery("select[name=subject]").val() == 0) {

        jQuery("label#select_error").show(); // show Warning 
        jQuery("select#sel").focus();  // Focus the select box      
        returnvalue=false;   

}

return returnvalue;

});
      });  // you can change jQuery with $

2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


<script>
  $('#myform').validate({ // initialize the plugin
            rules: {
          user_type:{ required: true},
         }
      });
</script>

নির্বাচন মান ফাঁকা হবে


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

1

এটি সহজ, আপনার নির্বাচন ক্ষেত্রের মানটি পাওয়া দরকার এবং এটি "ডিফল্ট" হতে পারে না।

if($('select').val()=='default'){
    alert('Please, choose an option');
    return false;
}

1

সমাধান @JMP উল্লেখ একটু সংশোধন সহ আমার ক্ষেত্রে কাজ: আমি ব্যবহার element.valueপরিবর্তে valueমধ্যে addmethod

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

// configure your validation
$("form").validate({
    rules: {
        SelectName: { valueNotEquals: "0" }
    },
    messages: {
        SelectName: { valueNotEquals: "Please select an item!" }
    }  
});

এটি সম্ভব হতে পারে, আমার এখানে একটি বিশেষ মামলা রয়েছে তবে কারণটির সন্ধান করতে পারি নি। তবে @ জেএমপির সমাধানটি নিয়মিত ক্ষেত্রে কাজ করা উচিত।


0

কীভাবে এটি বাছাই করতে হবে তার "বৈধতা" নির্বাচন করুন 3

$(document).ready(function(){

    $('.validateForm').validate({
        rules: {
            fullname: 'required',
            ragionesociale: 'required',
            partitaiva: 'required',
            recapitotelefonico: 'required',
            qualifica: 'required',
            email: {
                required: true,
                email: true
            },
        },
        submitHandler: function(form) {

            var fullname = $('#fullname').val(),
                            ragionesociale = $('#ragionesociale').val(),
                            partitaiva = $('#partitaiva').val(),
                            email = $('#email').val(),
                            recapitotelefonico = $('#recapitotelefonico').val(),
                            qualifica = $('#qualifica').val(),
                            dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;

            $.ajax({
                type: "POST",
                url: "util/sender.php",
                data: dataString,
                success: function() {

                    window.location.replace("./thank-you-page.php");


                }
            });
            return false;
        }
    });

});

3
স্ট্যাক ওভারফ্লোতে স্বাগতম! এই কোড স্নিপেটের জন্য আপনাকে ধন্যবাদ, যা কিছু সীমিত স্বল্পমেয়াদী সহায়তা সরবরাহ করতে পারে। একটি সঠিক ব্যাখ্যা কেন এটি সমস্যার একটি ভাল সমাধান তা দেখিয়ে তার দীর্ঘমেয়াদী মানকে ব্যাপকভাবে উন্নত করবে এবং ভবিষ্যতে পাঠকদের আরও অন্যান্য অনুরূপ প্রশ্নের সাথে আরও দরকারী করে তুলবে। আপনার অনুমানগুলি সহ কিছু ব্যাখ্যা যুক্ত করতে দয়া করে আপনার উত্তরটি সম্পাদনা করুন।
টবির গতি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.