Diperlukan Validasi jQuery Pilih

146

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.

SiberianGuy
sumber
Masukkan beberapa cuplikan kode agar kami dapat membantu.
Lee

Jawaban:

213

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!" }
  }  
 });
JMP
sumber
1
Anda dapat menguji teks yang dipilih sebagai ganti nilai, seperti ini:$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg.");
Pablo SG Pacheco
11
Untuk membantu pembaca masa depan: Di mana dikatakan SelectName itu berarti nilai atribut nama dan bukan nilai atribut id. Ini agak membingungkan karena ketika bekerja di JS satu biasanya bekerja dengan id dan bukan namanya. Lihat dokumentasi di sini : "aturan (default: aturan dibaca dari markup (kelas, atribut, data)) Jenis: Objek Kunci / pasangan nilai yang mendefinisikan aturan khusus. Kunci adalah nama elemen"
Dror
239

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>
Andrew Coats
sumber
11
Tetapi Anda harus memberikan nilai kosong pada opsi Anda - tidak selalu mungkin atau diinginkan
Muleskinner
4
Ini seharusnya bukan jawaban yang diterima karena poster asli secara khusus meminta untuk menggunakan "aturan" yang merupakan opsi yang diumpankan ke konstruktor yang valid, dan tidak ada dalam markup. Terkadang Anda tidak memiliki kemewahan memodifikasi markup. (Dan secara pribadi, saya hanya memilih untuk tidak menempatkan logika di markup.)
Mason Houtz
3
@MasonHoutz itu masih logika di markup, apakah logika mengharapkan value = "" atau value = "default"
billrichards
42

solusi paling sederhana

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

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

dan aturan validasi jquery requiredwill work

Basheer AL-MOMANI
sumber
30

gunakan aturan min

atur nilai opsi pertama ke 0

'selectName':{min:1}
Bung yang funky
sumber
Nilai pertama adalah tetap (ada beberapa logika backend terhadap nilai ini)
SiberianGuy
9

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

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

Pedro Paulo Mendes Pereira
sumber
1
singkatnya, tambahkan requiredatribut ke <select>tag dan tambahkan disabledatribut ke <option>tag pertama (atau yang memiliki selectedatribut jika ada)
Stephen
4

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 $
fthopkins
sumber
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>

nilai pilih akan kosong

abhishek kumar
sumber
2
Sementara potongan kode ini dapat menyelesaikan pertanyaan, termasuk penjelasan sangat membantu untuk meningkatkan kualitas posting Anda. Ingatlah bahwa Anda menjawab pertanyaan untuk pembaca di masa depan, dan orang-orang itu mungkin tidak tahu alasan untuk saran kode Anda. Tolong juga cobalah untuk tidak membuat kerumunan kode Anda dengan komentar penjelasan, ini mengurangi keterbacaan kode dan penjelasan!
Filnor
1

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

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

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.

Legenda
sumber
0

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

});
michele
sumber
3
Selamat Datang di Stack Overflow! Terima kasih atas cuplikan kode ini, yang mungkin memberikan bantuan jangka pendek terbatas. Penjelasan yang tepat akan sangat meningkatkan nilai jangka panjangnya dengan menunjukkan mengapa ini adalah solusi yang baik untuk masalah ini, dan akan membuatnya lebih bermanfaat bagi pembaca masa depan dengan pertanyaan lain yang serupa. Harap edit jawaban Anda untuk menambahkan beberapa penjelasan, termasuk asumsi yang Anda buat.
Toby Speight