1

以下に示すように、電子メール アドレス プロパティと電子メール アドレスの確認プロパティを持つビュー モデルがあります。

public class UserNewModel
{
    [Required]
    [StringLength(100)]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email Address")]
    public string EmailAddress { get; set; }

    [Required]
    [StringLength(100)]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Confirm Email Address")]
    [Compare("EmailAddress", ErrorMessage = "The email address and confirmation email address do not match.")]
    public string ConfirmEmailAddress { get; set; }

}

このモデルに強く型付けされた、対応する EditorTemplate があります。

@model SponsorworksSaaS.UI.Models.UserNewModel

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

私の UserNewModel は、次のような他のモデルに含まれています。

public class CompanyDetailsModel
{
    ....

    /// <summary>
    /// Used to capture the initial user account details when creating a new company
    /// </summary>
    [Display(Name = "Initial User Account")]
    public UserNewModel NewCompanyUser { get; set; }

}

この親モデルに関連付けられた対応する厳密に型指定されたビューは、 @Html.EditorFor を使用してエディター テンプレートを表示します。

@model SponsorworksSaaS.UI.Models.CompanyDetailsModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true, "Company change was unsuccessful. Please correct the errors and try again.")
    <div>
        <fieldset>
            <legend>Company Information</legend>
            <div>
               @Html.EditorFor(m => m.NewCompanyUser)
            </div>
            <p>
                <input type="submit" name="btnSubmit" value="Save Company" />
            </p>
        </fieldset>
    </div>
}

クライアント側での比較検証は、電子メール アドレスに対して常に失敗します。電子メール アドレスの比較テキスト ボックスに同じ文字列を入力すると、フォーカスを離すと常に比較検証エラー メッセージが表示されます。クライアント側で比較検証が失敗した場合でも、フォームを送信すると、ModelState.IsValid は true ですが、サーバー側で比較検証が行われているかどうかはわかりません。

生成されたビュー ソースを以下に示します。

<div class="editor-label">
    <label for="NewCompanyUser_EmailAddress">Email Address</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Email Address must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="The Email Address field is required." id="NewCompanyUser_EmailAddress" name="NewCompanyUser.EmailAddress" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="NewCompanyUser.EmailAddress" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
    <label for="NewCompanyUser_ConfirmEmailAddress">Confirm Email Address</label>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-equalto="The email address and confirmation email address do not match." data-val-equalto-other="*.EmailAddress" data-val-length="The field Confirm Email Address must be a string with a maximum length of 100." data-val-length-max="100" data-val-required="The Confirm Email Address field is required." id="NewCompanyUser_ConfirmEmailAddress" name="NewCompanyUser.ConfirmEmailAddress" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="NewCompanyUser.ConfirmEmailAddress" data-valmsg-replace="true"></span>
</div>

ここの他の投稿で提案されているように、jquery.validate.unobtrusive.js ファイルに一重引用符を追加しようとしましたが、これで問題は解決しませんでした。

element = $(options.form).find(":input[name=" + fullOtherName + "]")[0];

に変更:

element = $(options.form).find(":input[name='" + fullOtherName + "']")[0];

min と full の両方の js ファイルを使用してみましたが、問題は同じままです。実際、ready 関数に jquery を追加すると、次のようになります。

$(function () {
    var e1 = $('form').find(":input[name=*.EmailAddress]");
    var e2 = $('form').find(":input[name='*.EmailAddress']");
    alert(e1);
    alert(e1[0]);
    alert(e2);
    alert(e2[0]);
});

alert(e2[0]) は undefined を返しますが、alert(e1[0]) は予想されるテキスト ボックス要素を返します。

4

1 に答える 1

0

jquery.validate.unobtrusive.js ファイルの既知のエラーであることが判明しました。古いキャッシュ コピーを消去するのを忘れていました。ああ！問題のあるコード行は、他の誰かが変更する必要がある場合に備えて、私のバージョンのファイルの 284 行目にあります)。equalto を検索すると、コードの正しいセクションに近づきます。

このトリックを実行するには、Visual Studio のクリーンなソリューションで十分でした。

jquery.validate.unobtrusive.min.js を変更したにもかかわらず、ファイルを機能させることができませんでした

b.add("equalto",["other"],function(b){var h=g(b.element.name),i=b.params.other,d=e(i,h),f=a(b.form).find(":input[name="+d+"]")[0];c(b,"equalTo",f)});

に

b.add("equalto",["other"],function(b){var h=g(b.element.name),i=b.params.other,d=e(i,h),f=a(b.form).find(":input[name='"+d+"']")[0];c(b,"equalTo",f)});

find メソッド呼び出しの「+d+」を一重引用符で囲んでいることに注意してください。

于 2012-06-22T09:36:50.340 に答える