web-dev-qa-db-ja.com

JQuery Validateドロップダウンリスト

here の検証プラグインを使用しています。私はユーザーにドロップダウンリストのオプションを強制的に選択させようとしているので、ここにリスト用の私のHTMLがあります：

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

そして、これが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'",
     },
    }
});

問題は表示されませんが、ドロップダウンリストから[なし]を選択して[送信]をクリックしても、検証されないため、メッセージは表示されません。誰が私が間違っているのか教えてもらえますか？

jqueryhtmlvalidationdrop-down-menujquery-validate
26
Richard

documentation for required()の状態：

ユーザーに選択ボックスからオプションを選択させるには、<option value="">Choose...</option>などの空のオプションを指定します

value="none"タグに<option>を含めることで、検証呼び出しが行われないようにします。カスタム検証ルールを削除して、コードを簡素化することもできます。動作を示しているjsFiddleは次のとおりです。

http://jsfiddle.net/Kn3v5/

value属性を空の文字列に変更できない場合、何を伝えるべきかわかりません...それ以外の方法で検証する方法を見つけることができませんでした。

65
Ethan Brown

JQuery validateプラグインは、値が空白の場合にSelectフィールドを無効にします。必要なときに値を空白に設定しないのはなぜですか。

はい、いくつかの定義済みの値で選択フィールドを検証できます。

$("#everything").validate({
    rules: {
        select_field:{
            required: {
                depends: function(element){
                    if('none' == $('#select_field').val()){
                        //Set predefined value to blank.
                        $('#select_field').val('');
                    }
                    return true;
                }
            }
        }
    }
});

選択フィールドに空白の値を設定できますが、場合によってはできません。例：ドロップダウンフィールドを生成する関数を使用し、それを制御することはできません。

役に立てば幸いです。

6
Nishant Kumar

これが私の解決策でした：

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

最も簡単な方法は、requiredに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/>​
1
Dulith De Costa
$(document).ready(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $(#HoursEntry option:selected).val();
if(HoursEntry == "")
{
$("#HoursEntry").html("Please select");
return false;
}
});
});
0
user
    <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>
0
Amit Joshi