jQuery Gerekli Seçimi Doğrula

JQuery Validate eklentisini kullanarak html select öğesini doğrulamaya çalışıyorum. "Zorunlu" kuralı doğru olarak ayarladım, ancak her zaman doğrulamayı geçer çünkü varsayılan olarak sıfır indeksi seçilir. Gerekli kural tarafından kullanılan boş değeri tanımlamanın herhangi bir yolu var mı?

UPD. Misal. Aşağıdaki html kontrolüne sahip olduğumuzu hayal edin:

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

Doğrulama eklentisinin "varsayılan" değeri boş olarak kullanmasını istiyorum.

Kendi kuralınızı yazabilirsiniz!

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

Daha kolay bir çözüm burada özetlenmiştir: Seçim kutusunu doğrula

Değerin boş olmasını sağlayın ve gerekli özelliği ekleyin

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

en basit çözüm

sadece ilk seçeneğin değerini boş dizeye ayarlayın value=""

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

ve jquery doğrulama required kuralı will work

min kuralı kullan

ilk seçenek değerini 0 olarak ayarla

'selectName':{min:1}

Yalnızca validate[required]bu seçimin sınıfı olarak koymanız ve ardından değer = "" olan bir seçenek koymanız gerekir.

Örneğin:

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

Sorunun sorulduğu anda eklentinin nasıl olduğunu bilmiyorum (2010), ancak bugün aynı problemle karşılaştım ve şu şekilde çözdüm:

1. Seçme etiketinize bir ad niteliği verin. Örneğin bu durumda

   <select name="myselect">

2. Etiket seçeneğinde value = "default" niteliğiyle çalışmak yerine, varsayılan seçeneği devre dışı bırakın veya Andrew Coats tarafından önerildiği gibi value = "" ayarlayın

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

   veya

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

3. Eklenti doğrulama kuralını ayarlayın

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

   veya

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

Gözlem: Andrew Coats'un çözümü yalnızca formunuzda tek bir seçiminiz varsa çalışır. Çözümünün birden fazla ile çalışmasını istiyorsanız, seçiminize bir ad özelliği ekleyin.

Umarım yardımcı olur! :)

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

seçim değeri boş kalacaktır

Çok basit, Select field değerini almanız gerekir ve bu "varsayılan" olamaz.

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

@JMP bahsettiği çözüm küçük bir değişiklik ile benim durumumda çalıştı: Kullandığım element.valueyerine valuede 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!" }
    }  
});

Burada özel bir durumum olması mümkün olabilir, ancak sebebini bulamamıştım. Ancak @ JMP'nin çözümü normal durumlarda çalışmalıdır.

seçme "qualifica" nasıl doğrulanır, 3 seçer

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

});