jQuery select box validation

Question

Ho il seguente codice in jQuery.
È necessario visualizzare un messaggio di convalida "Anno richiesto" quando il valore dell'opzione dell'elemento select è "0".

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#register").validate({ 
     debug: true, 
     rules: { 
      year: { 
       required: function() { 
        if ($("#year option[value='0']")) { 
         return true; 
        } else { 
         return false; 
        } 
       } 
      } 
     }, 
     messages: { 
      year: "Year Required", 
     }, 
    }); 
}) 
</script> 

casella Seleziona

<select name="year" id="year"> 
    <option value="0">Year</option> 
    <option value="1">1919</option> 
    <option value="2">1920</option> 
    <option value="3">1921</option> 
    <option value="4">1922</option> 
</select> 

Answer 1

Dal momento che non è possibile impostare value="" entro il primo option, è necessario creare il proprio regola utilizzando the built-in addMethod() method.

jQuery:

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     rules: { 
      year: { 
       selectcheck: true 
      } 
     } 
    }); 

    jQuery.validator.addMethod('selectcheck', function (value) { 
     return (value != '0'); 
    }, "year required"); 

}); 

HTML:

<select name="year"> 
    <option value="0">Year</option> 
    <option value="1">1955</option> 
    <option value="2">1956</option> 
</select> 

lavoro Demo: http://jsfiddle.net/tPRNd/

---

Risposta originale: (Solo se è possibile impostare value="" entro il primo option)

Per convalidare correttamente un elemento select con il plugin jQuery Convalida richiede semplicemente che il primo contiene optionvalue="". Quindi rimuovere il 0 da value="0" ed è stato risolto.

jQuery:

$(document).ready(function() { 

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

}); 

HTML:

<select name="year"> 
    <option value="">Year</option> 
    <option value="1">1955</option> 
    <option value="2">1956</option> 
</select> 

Demo: http://jsfiddle.net/XGtEr/

Answer 2

semplificare il tutto un po ', correggere alcuni problemi con le virgole, che farà saltare in aria alcuni browser:

$(document).ready(function() { 
     $("#register").validate({ 
      debug: true, 
      rules: { 
       year: { 
        required: function() { 
         return ($("#year option:selected").val() == "0"); 
        } 
       } 
      }, 
      messages: { 
       year: "Year Required" 
      } 
     }); 
    }); 

salto ad un ipotesi, dovrebbe il vostro prescelto non hai questo attributo validate="required:true"?

Answer 3

di mettere una regola di richiedere in un elenco di selezione è sufficiente un'opzione con un valore vuoto

<option value="">Year</option> 

quindi solo applicando richiesto da sola è sufficiente

<script> 
    $(function() { 
     $("form").validate(); 
    }); 
</script> 

con modulo

<form> 
<select name="year" id="year" class="required"> 
    <option value="">Year</option> 
    <option value="1">1919</option> 
    <option value="2">1920</option> 
    <option value="3">1921</option> 
    <option value="4">1922</option> 
</select> 
<input type="submit" /> 
</form> 

fiddle is here

Answer 4

http://docs.jquery.com/Plugins/Validation/Methods/required

modificare il codice per 'selezionare' come sotto per il controllo di una selezione 0 o null valore da selezionare Elenco

case 'select': 
var options = $("option:selected", element); 
return (options[0].value != 0 && options.length > 0 && options[0].value != '') && (element.type == "select-multiple" || ($.browser.msie && !(options[0].attributes['value'].specified) ? options[0].text : options[0].value).length > 0); 

Answer 5

Jquery Select Box Validation.You può avviso di messaggio tramite avviso o Put messaggio nel Div secondo i vostri requisiti .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="message"></div> 
 
<form method="post"> 
 
<select name="year" id="year"> 
 
    <option value="0">Year</option> 
 
    <option value="1">1919</option> 
 
    <option value="2">1920</option> 
 
    <option value="3">1921</option> 
 
    <option value="4">1922</option> 
 
</select> 
 
<button id="clickme">Click</button> 
 
</form> 
 
<script> 
 
$("#clickme").click(function(){ 
 

 
if($("#year option:selected").val()=='0'){ 
 

 
alert("Please select one option at least"); 
 

 
    $("#message").html("Select At least one option"); 
 

 
} 
 

 

 
}); 
 

 
</script>