5

セットアップ：

  • クライアント側の検証（+控えめなJavaScript）が有効になっているASP.NETMVC4。
  • jquery 1.8.2
  • jquery.validate 1.10.0
  • jquery.validate.unobtrusive

html：

<form action="/" method="post">
    <select data-val="true" data-val-required="DropDown is required." id="DropDown" name="DropDown">
        <option value="">Select a letter</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span data-valmsg-for="DropDown" data-valmsg-replace="true"></span>
    <br/>
    <button type="submit">Submit</button>
</form>​

ここで実際の動作を確認できます。

ドロップダウンのサーバー側のコードは、かなり面白くありません。

// View Model
public class ViewModel
{
    [Required]
    public string DropDown { get; set; }
}

// View
@Html.DropDownListFor(m => m.DropDown,
                      new SelectList(new[] { "A", "B", "C" }),
                      "Select a letter")

そして、問題を確認するための手順は次のとおりです。

  1. マウスを使用して、値（A、B、C）のいずれかを選択します。
  2. マウスを使用して、デフォルトの空の値を選択します（文字を選択します）。必要なメッセージは表示されません。
  3. 矢印キーを使用して、値（A、B、C）のいずれかを選択します。
  4. 矢印キーを使用して、デフォルトの空の値を選択します（文字を選択します）。今回は、必要なメッセージが表示されます。
  5. マウスを使用して、値（A、B、C）のいずれかを選択します。必要なメッセージが消えます。
  6. マウスを使用して、デフォルトの空の値を選択します（文字を選択します）。必要なメッセージが表示されます。

検証が初めてトリガーされるまで（キーボードで値を変更するか、送信ボタンを押すことによって）、イベントはマウスイベントに対して開始されないようです。なぜこれが起こっているのか（私は何か間違ったことをしているのですか？）、または回避策についての説明をいただければ幸いです。

ありがとう！

4

1 に答える 1

1

JQuery Validate に 2 つの変更を加える必要があると思います。

1.) 空の文字列の最初の値を無効な値として定義するメソッドを追加します

    $.validator.addMethod(
            "SelectLetter",
            function(value, element) {
                if ($("#DropDown").val() === ''){
                    return false;
                } else return true;
            },
            "Please Select a Letter"
    );
    var validator = $("#LetterForm").validate({
            rules: {
                    DropDown: {
                        SelectLetter: true
                    }
            }

    });

2.) 検証を起動する click() イベントを追加する

$("#DropDown").click(function(){
          $("#LetterForm").validate().element("#DropDown");
        });
});

完全な例http://jsfiddle.net/stupiddingo/L4c33/1/

もっと簡単な解決策があるかもしれませんが、これはうまくいくようです。これは、以前に尋ねられたjQuery カスタム検証メソッドの問題に対する回答に基づいています。

于 2012-12-28T05:02:25.257 に答える