jQuery Validate Wymagane Wybierz

Próbuję sprawdzić poprawność elementu HTML Select za pomocą wtyczki jQuery Validate. Ustawiłem regułę „required” na true, ale zawsze przechodzi ona walidację, ponieważ domyślnie wybrany jest indeks zerowy. Czy istnieje sposób zdefiniowania pustej wartości używanej przez wymaganą regułę?

UPD. Przykład. Wyobraź sobie, że mamy następującą kontrolkę HTML:

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

Chcę, aby wtyczka Validation używała wartości „default” jako pustej.

Możesz napisać własną zasadę!

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

Tutaj przedstawiono prostsze rozwiązanie: Zatwierdź pole wyboru

Ustaw wartość jako pustą i dodaj wymagany atrybut

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

najprostsze rozwiązanie

po prostu ustaw wartość pierwszej opcji na pusty łańcuch value=""

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

i reguła walidacji jQuery requiredwill work

użyj reguły min

ustaw wartość pierwszej opcji na 0

'selectName':{min:1}

Musisz tylko umieścić validate[required]jako klasę tego wyboru, a następnie wstawić opcję z wartością = ""

na przykład:

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

Nie wiem, jak wyglądała wtyczka w momencie zadawania pytania (2010), ale dziś stanąłem przed tym samym problemem i rozwiązałem go w ten sposób:

1. Nadaj wybranemu znacznikowi atrybut nazwy. Na przykład w tym przypadku

   <select name="myselect">

2. Zamiast pracować z atrybutem value = "default" w opcji tagu, wyłącz opcję domyślną lub ustaw wartość = "" zgodnie z sugestią Andrew Coatsa

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

   lub

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

3. Ustaw regułę sprawdzania poprawności wtyczki

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

   lub

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

Obs: Rozwiązanie Andrew Coatsa działa tylko wtedy, gdy masz tylko jedną opcję w formularzu. Jeśli chcesz, aby jego rozwiązanie działało z więcej niż jednym wyborem, dodaj atrybut nazwy do wybranego.

Mam nadzieję, że to pomoże! :)

Oto prosty i zrozumiały przykład:

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

wybrana wartość będzie pusta

To proste, musisz pobrać wartość pola Select i nie może być ona „domyślna”.

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

Rozwiązanie wspomniane przez @JMP zadziałało w moim przypadku z niewielką modyfikacją: używam element.valuezamiast valuew 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!" }
    }  
});

Możliwe, że mam tutaj specjalny przypadek, ale nie znalazłem przyczyny. Ale rozwiązanie @ JMP powinno działać w zwykłych przypadkach.

jak potwierdzić wybór "qualifica", ma 3 wybory

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

});