JQuery valider liste déroulante
J'utilise le plugin de validation de ici . J'essaie de forcer l'utilisateur à sélectionner une option dans la liste déroulante, alors voici mon html pour la liste:
Select the best option<br/>
<select name="dd1" id="dd1">
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select> <br/><br/>
Et voici les trucs de validation jquery:
$("#everything").validate({
onsubmit: true,
rules: {
dd1: {
required: {
depends: function(element) {
return $("#dd1").val() == "none";
}
}
},
messages: {
dd1: {
required: "Please select an option from the list, if none are appropriate please select 'Other'",
},
}
});
Je ne vois aucun problème, mais même lorsque je sélectionne none dans la liste déroulante et que je clique sur submit, il ne le validera pas et ne montrera donc aucun message. Quelqu'un peut me dire ce que je fais mal?
7 réponses
La documentation pour required() indique:
Pour forcer un utilisateur à sélectionner une option dans une zone de sélection, fournissez des options vides comme
<option value="">Choose...</option>
En ayant value="none" dans votre balise <option>, vous empêchez l'appel de validation d'être effectué. Vous pouvez également supprimer votre règle de validation personnalisée, ce qui simplifie votre code. Voici un jsfiddle le montrant en action:
Si vous ne pouvez pas modifier l'attribut value chaîne vide, je ne sais pas quoi vous dire...Je n'ai trouvé aucun moyen de le faire valider autrement.
Comme nous le savons, le plugin jQuery validate invalide le champ Select lorsqu'il a une valeur vide. Pourquoi ne pas définir sa valeur sur vide si nécessaire.
Oui, vous pouvez valider le champ select avec une valeur prédéfinie .
$("#everything").validate({
rules: {
select_field:{
required: {
depends: function(element){
if('none' == $('#select_field').val()){
//Set predefined value to blank.
$('#select_field').val('');
}
return true;
}
}
}
}
});
Nous pouvons définir une valeur vide pour select field mais dans certains cas nous ne pouvons pas. par exemple: en utilisant une fonction qui génère un champ déroulant pour vous et vous n'avez pas le contrôle dessus.
J'espère que ça aide comme ça m'aide.
C'était ma solution:
J'ai ajouté nécessaire la balise select:
<div class="col-lg-10">
<select class="form-control" name="HoursEntry" id="HoursEntry" required>
<option value="">Select.....</option>
<option value="0.25">0.25</option>
<option value="0.5">0.50</option>
<option value="1">1.00</option>
<option value="1.25">1.25</option>
<option value="1.5">1.50</option>
<option value="2">2.00</option>
<option value="2.25">2.25</option>
<option value="2.5">2.50</option>
<option value="3">3.00</option>
<option value="3.25">3.25</option>
<option value="3.5">3.50</option>
<option value="4">4.00</option>
<option value="4.25">4.25</option>
<option value="4.5">4.50</option>
<option value="5">5.00</option>
<option value="5.25">5.25</option>
<option value="5.5">5.50</option>
<option value="6">6.00</option>
<option value="6.25">6.25</option>
<option value="6.5">6.50</option>
<option value="7">7.00</option>
<option value="7.25">7.25</option>
<option value="7.5">7.50</option>
<option value="8">8.00</option>
</select>
$(document).ready(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $(#HoursEntry option:selected).val();
if(HoursEntry == "")
{
$("#HoursEntry").html("Please select");
return false;
}
});
});
<div id="msg"></div>
<!-- put above tag on body to see selected value or error -->
<script>
$(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $("#HoursEntry option:selected").val();
console.log(HoursEntry);
if(HoursEntry == "")
{
$("#msg").html("Please select at least One option");
return false;
}
else
{
$("#msg").html("selected val is "+HoursEntry);
}
});
});
</script>
Le moyen le plus simple de le faire est d'ajouter required dans votre select
Select the best option
<br/>
<select name="dd1" id="dd1" required>
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select>
<br/><br/>
J'ai un peu modifié votre code. Voici une version de travail (pour moi):
<select name="dd1" id="dd1">
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select>
<div style="color:red;" id="msg_id"></div>
<script>
$('#everything').submit(function(e){
var department = $("#msg_id");
var msg = "Please select Department";
if ($('#dd1').val() == "") {
department.append(msg);
e.preventDefault();
return false;
}
});
</script>