フォームの検証にjQuery Validationプラグインを使用していますが、リスト/選択ボックスを検証できません
<select id="select">
<option value="-1">Choose an option</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ここで、ユーザーが「オプションを選択する」以外のすべてを選択するようにします(これはデフォルトのオプションであり、値は-1です)。最初のオプションを選択した場合に検証されないように。これをどのように行うことができますか?
Jquery Validatorカスタムルール を使用できます。
同様の例を説明します here 。以下のコードは例からのものです。
// 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: "-1" }
},
messages: {
SelectName: { valueNotEquals: "Please select an item!" }
}
});
<option value="">Choose an option</option>
-1ではなく空白として
jquery検証を使用する
rules: {
select: "required"
}
これをルールに追加します
select:{
required: function(element) {
if( $("#select").val() =='-1'){
return false;
} else {
return true;
}
}
}
または、要素の値を使用します。
required: function(Elm) {
if(Elm.options[Elm.options.selectedIndex].value != "-1") {
return true;
} else {
return false;
}
}
条件の値を使用しないのはなぜですか?
required: function(Elm) {
return (Elm.options[Elm.options.selectedIndex].value != "-1");
}
これは、ロビンのソリューションと同じですが、はるかに短いものです。
Jquery ui selectドロップダウンの検証方法
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script>
$(".intselect").selectmenu();
$().ready(function() {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#validateregister" ).validate({
rules: {
firstname: {
required: true
},
email: {
required: true,
email: true
},
year: {
required: true
}
}
});
$('#validateregister').change(function() {
if ($("#validateregister").valid()) {
$(".go").removeAttr("disabled");
}
else{
$(".go").attr("disabled","disabled");
}
});
});
</script>
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<form id="validateregister" style="width: 300px;">
<div> <br />
<input type="text" name="firstname" class="form-control" id="firstname" />
</div>
<div> <br />
<input type="text" name="email" class="form-control" id="email" />
</div>
<div> <br />
<select class="form-control intselect" name="year" id="year">
<option value="">Select year</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2015</option>
</select>
</div>
<div> <br />
<input type="submit" class="btn btn-default go" value="submit" disabled>
</div>
</form>