Diperlukan Validasi jQuery Pilih

Saya mencoba memvalidasi elemen pilih html menggunakan plugin jQuery Validate. Saya menetapkan aturan "wajib" menjadi true tetapi selalu melewati validasi karena indeks nol dipilih secara default. Apakah ada cara untuk mendefinisikan nilai kosong yang digunakan oleh aturan yang disyaratkan?

UPD. Contoh. Bayangkan kita memiliki kontrol html berikut:

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

Saya ingin plugin Validasi menggunakan nilai "default" sebagai kosong.

Anda dapat menulis aturan Anda sendiri!

 // 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!" }
  }  
 });

Solusi yang lebih mudah telah diuraikan di sini: Validasi kotak pilih

Jadikan nilainya kosong dan tambahkan atribut yang diperlukan

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

solusi paling sederhana

cukup atur nilai opsi pertama ke string kosong value=""

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

dan aturan validasi jquery requiredwill work

gunakan aturan min

atur nilai opsi pertama ke 0

'selectName':{min:1}

Anda hanya perlu memasukkan validate[required] sebagai kelas dari pemilihan ini dan kemudian menempatkan opsi dengan nilai = ""

sebagai contoh:

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

Saya tidak tahu bagaimana plugin saat pertanyaan diajukan (2010), tapi saya menghadapi masalah yang sama hari ini dan menyelesaikannya dengan cara ini:

1. Berikan atribut nama pada tag pilihan Anda. Misalnya dalam hal ini

   <select name="myselect">

2. Alih-alih bekerja dengan nilai atribut = "default" di opsi tag, nonaktifkan opsi default atau set nilai = "" seperti yang disarankan oleh Andrew Coats

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

   atau

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

3. Tetapkan aturan validasi plugin

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

   atau

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

Obs: Solusi Andrew Coats hanya berfungsi jika Anda hanya memiliki satu pilihan dalam formulir Anda. Jika Anda ingin solusinya bekerja dengan lebih dari satu pilih tambahkan atribut nama ke pilih Anda.

Semoga ini bisa membantu! :)

Berikut adalah contoh sederhana dan dapat dimengerti:

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

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 $

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

nilai pilih akan kosong

Sederhana, Anda harus mendapatkan nilai bidang Pilih dan tidak boleh "default".

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

Solusi yang disebutkan oleh @JMP bekerja dalam kasus saya dengan sedikit modifikasi: Saya menggunakan element.valuebukan valuedi 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!" }
    }  
});

Mungkin saja, saya punya kasus khusus di sini, tetapi tidak melacak penyebabnya. Tetapi solusi @ JMP harus bekerja dalam kasus biasa.

bagaimana memvalidasi pilih "qualifica" itu memiliki 3 pilih

$(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;
        }
    });

});