jquery - jQueryUIの日付ピッカーが期待どおりに機能しない

Question

JqueryUIのdatepickerを統合しようとしています。正しく表示され、日付を選択できます。ただし、テキストフィールドに日付を挿入してフォームを送信しようとすると、「ModifiedDateフィールドが必要です」というメッセージとともに検証エラーが表示されます。

問題を解決するのを手伝ってください

これは私のビューコードですCreate.cshtml：

@model EFDBcontextPracticeWithMVC.Models.Customer

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

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




@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Customer</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.NameStyle)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NameStyle)
            @Html.ValidationMessageFor(model => model.NameStyle)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.FirstName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.FirstName)
            @Html.ValidationMessageFor(model => model.FirstName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.MiddleName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.MiddleName)
            @Html.ValidationMessageFor(model => model.MiddleName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.LastName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.LastName)
            @Html.ValidationMessageFor(model => model.LastName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Suffix)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Suffix)
            @Html.ValidationMessageFor(model => model.Suffix)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CompanyName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CompanyName)
            @Html.ValidationMessageFor(model => model.CompanyName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.SalesPerson)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.SalesPerson)
            @Html.ValidationMessageFor(model => model.SalesPerson)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EmailAddress)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EmailAddress)
            @Html.ValidationMessageFor(model => model.EmailAddress)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PasswordHash)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PasswordHash)
            @Html.ValidationMessageFor(model => model.PasswordHash)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PasswordSalt)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.PasswordSalt)
            @Html.ValidationMessageFor(model => model.PasswordSalt)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.rowguid)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.rowguid)
            @Html.ValidationMessageFor(model => model.rowguid)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ModifiedDate)
        </div>
        <div class="editor-field" >
            @Html.EditorFor(model => model.ModifiedDate)
            @Html.ValidationMessageFor(model => model.ModifiedDate)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

これは私の部分的なビューコードですDateTime.cshtml：

@model System.DateTime?
@Html.TextBox(" ", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "pickDate" })

<script type="text/javascript">
    $(document).ready(function () {

        $('.pickDate').datepicker();
    });
</script>

これが私のCustomer.cs モデルです：

//------------------------------------------------------------------------------
// <auto-generated>
//    This code was generated from a template.
//
//    Manual changes to this file may cause unexpected behavior in your application.
//    Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace EFDBcontextPracticeWithMVC.Models
{
    using System;
    using System.Collections.Generic;

    public partial class Customer
    {
        public Customer()
        {
            this.CustomerAddresses = new HashSet<CustomerAddress>();
            this.SalesOrderHeaders = new HashSet<SalesOrderHeader>();
        }

        public int CustomerID { get; set; }
        public bool NameStyle { get; set; }
        public string Title { get; set; }
        public string FirstName { get; set; }
        public string MiddleName { get; set; }
        public string LastName { get; set; }
        public string Suffix { get; set; }
        public string CompanyName { get; set; }
        public string SalesPerson { get; set; }
        public string EmailAddress { get; set; }
        public string Phone { get; set; }
        public string PasswordHash { get; set; }
        public string PasswordSalt { get; set; }
        public System.Guid rowguid { get; set; }
        public System.DateTime ModifiedDate { get; set; }

        public virtual ICollection<CustomerAddress> CustomerAddresses { get; set; }
        public virtual ICollection<SalesOrderHeader> SalesOrderHeaders { get; set; }
    }
}

レンダリングされたHTMLのソースは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Edit</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery-1.9.0.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.ui.core.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jquery.ui.widget.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>

</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                    [ <a href="/Account/LogOn">Log On</a> ]

            </div>
            <nav>
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                </ul>
            </nav>
        </header>
        <section id="main">


<h2>Edit</h2>

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<form action="/default1/Edit/4" method="post"><div class="validation-summary-errors"><ul><li style="display:none"></li>
</ul></div>    <fieldset>
        <legend>Customer</legend>

        <input data-val="true" data-val-number="The field CustomerID must be a number." data-val-required="The CustomerID field is required." id="CustomerID" name="CustomerID" type="hidden" value="4" />

        <div class="editor-label">
            <label for="NameStyle">NameStyle</label>
        </div>
        <div class="editor-field">
            <input class="check-box" data-val="true" data-val-required="The NameStyle field is required." id="NameStyle" name="NameStyle" type="checkbox" value="true" /><input name="NameStyle" type="hidden" value="false" />
            <span class="field-validation-valid" data-valmsg-for="NameStyle" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="Title">Title</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="Title" name="Title" type="text" value="Ms.sdvsf" />
            <span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="FirstName">FirstName</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="Janet" />
            <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="MiddleName">MiddleName</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="MiddleName" name="MiddleName" type="text" value="M." />
            <span class="field-validation-valid" data-valmsg-for="MiddleName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="LastName">LastName</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="LastName" name="LastName" type="text" value="Gates" />
            <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="Suffix">Suffix</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="Suffix" name="Suffix" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="Suffix" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="CompanyName">CompanyName</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="CompanyName" name="CompanyName" type="text" value="Modular Cycle Systems" />
            <span class="field-validation-valid" data-valmsg-for="CompanyName" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="SalesPerson">SalesPerson</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="SalesPerson" name="SalesPerson" type="text" value="adventure-works\jillian0" />
            <span class="field-validation-valid" data-valmsg-for="SalesPerson" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="EmailAddress">EmailAddress</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="EmailAddress" name="EmailAddress" type="text" value="janet1@adventure-works.com" />
            <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="Phone">Phone</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="Phone" name="Phone" type="text" value="710-555-0173" />
            <span class="field-validation-valid" data-valmsg-for="Phone" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="PasswordHash">PasswordHash</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="PasswordHash" name="PasswordHash" type="text" value="ElzTpSNbUW1Ut+L5cWlfR7MF6nBZia8WpmGaQPjLOJA=" />
            <span class="field-validation-valid" data-valmsg-for="PasswordHash" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="PasswordSalt">PasswordSalt</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" id="PasswordSalt" name="PasswordSalt" type="text" value="nm7D5e4=" />
            <span class="field-validation-valid" data-valmsg-for="PasswordSalt" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="rowguid">rowguid</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-required="The rowguid field is required." id="rowguid" name="rowguid" type="text" value="ff862851-1daa-4044-be7c-3e85583c054d" />
            <span class="field-validation-valid" data-valmsg-for="rowguid" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="ModifiedDate">ModifiedDate</label>
        </div>
        <div class="editor-field">
            <input class="pickDate" id="ModifiedDate__" name="ModifiedDate. " type="text" value="1/1/0001" />

<script type="text/javascript">
    $(document).ready(function () {

        $('.pickDate').datepicker();
    });
</script>
            <span class="field-validation-error" data-valmsg-for="ModifiedDate" data-valmsg-replace="true">The ModifiedDate field is required.</span>
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
</form>
<div>
    <a href="/default1">Back to List</a>
</div>

        </section>
        <footer>
        </footer>
    </div>
</body>
</html>

score 0 · Accepted Answer

ライン：

<input class="pickDate" id="ModifiedDate__" name="ModifiedDate. " type="text" value="1/1/0001" />

私には奇妙に思えます。__具体的には、属性の末尾のアンダースコアとid属性のドットスペース. ですname。あなたのバリデーターが存在しないを必要としているとModifiedDateしか思えません。代わりに、とがModifiedDate__ありModifiedDate.ます。

末尾のアンダースコア__とドットスペースを削除します. 。これで問題が解決する場合があります。

この行は次のようになります。

<input class="pickDate" id="ModifiedDate" name="ModifiedDate" type="text" value="1/1/0001" />

免責事項:私は ASP や .net について何も知りません。これは単なる推測にすぎません。

ヒント：

これはあなたの ASP です:

<div class="editor-label">
    @Html.LabelFor(model => model.ModifiedDate)
</div>
<div class="editor-field" >
    @Html.EditorFor(model => model.ModifiedDate)
    @Html.ValidationMessageFor(model => model.ModifiedDate)
</div>

出てくるものは次のとおりです。

<div class="editor-label">
    <label for="ModifiedDate">ModifiedDate</label>
</div>
<div class="editor-field">
    <input class="pickDate" id="ModifiedDate__" name="ModifiedDate. " type="text" value="1/1/0001" />

    <script type="text/javascript">
    $(document).ready(function () {

        $('.pickDate').datepicker();
    });
    </script>
    <span class="field-validation-error" data-valmsg-for="ModifiedDate" data-valmsg-replace="true">The ModifiedDate field is required.</span>
</div>

残りのフィールドは、ASP で同じように設定されていますがModifiedDate、HTML で唯一奇妙なフィールドです。
for生成された HTMLの属性を見てください。id次に、フィールドの属性を見てください。それらは同一である必要があります。そうではありません。

jquery - jQueryUIの日付ピッカーが期待どおりに機能しない

1 に答える 1

Related

Reference