5

jquery.ui の datepicker を使用しなかったのは、1 週間全体と異なる条件で複数の日付を選択する必要があったためです。そのため、Date フィールドの EditorTemplate でKeith Wood のdatepicker を使用しています。

    @model Nullable<DateTime>
    @{
        string name = ViewData.TemplateInfo.HtmlFieldPrefix;
        string id = name.Replace(".", "_");
        string dt = Model.HasValue ? String.Format("{0:d}",(string)Model.Value.ToShortDateString()) : string.Empty;
    }        
    @Html.TextBox("", dt, new { @class = "datefield", @type = "date", @id = id })
    <script type="text/javascript">
        $(document).ready(function () {
            $('#@id').datepick({
                renderer: $.datepick.themeRollerRenderer,
                multiSelect: 999
            });
        });    
    </script>

テキストボックスを使用し、日付ピッカーを「ポップアップ」する場合、検証は問題なく機能します。しかし、私が本当に望んでいるのはインライン日付ピッカーを使用することですが、これらの条件下で検証を機能させることができません:

    @model Nullable<DateTime>
    @{
        string name = ViewData.TemplateInfo.HtmlFieldPrefix;
        string id = name.Replace(".", "_");
        string dt = Model.HasValue ? String.Format("{0:d}",(string)Model.Value.ToShortDateString()) : string.Empty;
    }

    <div class="kwdp">
    </div>
    @Html.Hidden("", dt, new { @class = "datefield", @id = id })
    <script type="text/javascript">
        $(document).ready(function () {
            $('.kwdp').datepick({
                renderer: $.datepick.themeRollerRenderer,
                multiSelect: 999
            });
        });    
    </script>

これは、私のカスタム クライアント側検証の抜粋です。

    form.validate({ 
        rules:{
            StartDate: { 
                required: true, 
                dpDate: true 
            }
        },
        messages: {
            StartDate: 'Please enter a valid date (dd-mm-yyyy)'
        }
    });

そして、これが私のデータ クラスの DateTime フィールドの定義です。

    [Required]
    [DataType(DataType.Date)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd-MM-yyyy}")]
    public Nullable<DateTime> StartDate { get; set; }

非表示フィールドに日付を入力するには、日付ピッカーに onSelect を追加する必要があることを理解していますが、非表示フィールドの値が空の場合はエラーが発生するはずですが、検証されません。HTML マークアップは次のようにレンダリングされます。

    <input name="StartDate" class="datefield" id="StartDate" type="hidden" data-val-required="The StartDate field is required." data-val="true" data-val-date="The field StartDate must be a date." value=""/>

次のライブラリを使用しています。

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>    
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.ext.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/datepick/jquery.datepick.validation.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.validation.min.js")" type="text/javascript"></script>

開発者が同じ問題を抱えているように見える同様の未回答の質問を見つけましたが、投稿された解決策はありません。私が間違っている場所へのアイデアはありますか?

4

2 に答える 2

8

ジェイソンは正しい。デフォルトでは、jquery 検証は非表示の入力要素をスキップ/無視します。これは、CSSinput type="hidden"を持つ/継承する要素やテキスト ボックスにも当てはまります。display:none;という設定がありignore、そのデフォルト値は次のようになります。

ignore: ':hidden'

次のスクリプトを使用して、ページでこの設定をオーバーライドできます。

$.validator.setDefaults({
    ignore: ''
});

これは、非表示要素の検証を無視しないように jquery validate に指示します。このスクリプトを使用すると、jquery の検証により、datepicker フィールド値が変更されるたびに手動で検証する必要がなく、目立たないようにフィールドが自動的に検証されます。

于 2012-06-02T16:55:05.547 に答える
0

MVC3 では、非表示のフォーム フィールドは、クライアント側の検証スクリプトによって検証されません。テキストフィールドを非表示にしないのはなぜですか?

@Html.TextBox("", dt, new { @class = "datefield", @type = "date", @id = id, style="display:none;" })

または @Html.Hidden フィールドとして保持したい場合は、日付ピッカーが変更されるたびに、フォームで検証プラグインを手動で呼び出す必要があります。

 $("form").validate().form();
于 2012-06-02T01:28:44.720 に答える