asp.net-mvc - カミソリでフォーム検証

Question

.net mvc カミソリフォームに次のものがあり、送信ボタンをクリックしていますが、js の検証によって検証されていません。私はFirefoxでデバッグしましたが、代わりにフォームメソッドに直接進み、フォームの送信を停止するための検証がフォームに表示されません。

model.LoanId の HTML 出力は単に LoanId です。

フォームを正しく検証するにはどうすればよいですか????

私は何を間違っていますか？

HTML

        @using (Html.BeginForm("Refresh", "Home", FormMethod.Post, new { id = "frmTemps" })) 
    <tr>
                    <td>
                    @Html.LabelFor(model => model.LoanId)
                    @Html.TextBoxFor(model => model.LoanId)
                    <td colspan="3">
                        <input type="submit" id="btnRefresh" value='Refresh' />
                    </td>
                </tr>

js

$("#frmTemps").validate({
        event: "submit",
        rules: {
            LoanID: {
                required: true
            }
        },
        messages: {
            LoanID: {
                required: ' Please enter a Loan ID. '
            }
        }
    });

I also tried it with non-model data below and got the same thing.

    @Html.Label("loanid:", "LoanID")
                    @Html.TextBox("loanID")


Here is the html I'm trying to validate:
<td>@Html.LabelFor(model => model.LoanType)
                    @Html.TextBox("SBA", "SBA")
                    @Html.ValidationMessageFor(model => model.LoanType)
                    @*@Html.TextBoxFor(model => model.LoanType)*@
                </td>
                <td>
                    <label for="ddlDept">Department:</label>
                    @(Html.Kendo().DropDownListFor(model => model.SelectedDeptText)
                            .Name("ddlDept")
                            .DataTextField("DepartmentName")
                            .DataValueField("DepartmentID")
                            .Events(e => e.Change("Refresh"))
                            .DataSource(source =>
                            {
                                source.Read(read =>
                                {
                                    read.Action("GetDepartments", "Home");
                                });
                            })
                    )
                    @Html.ValidationMessageFor(model => model.SelectedDeptText)

モデルを見る

public class ViewModelTemplate_Guarantors
{
    public int SelectedTemplateId { get; set; }
    public IEnumerable<PDFTemplate> Templates { get; set; }

    public int SelectedGuarantorId { get; set; }
    public IEnumerable<tGuarantor> Guarantors { get; set; }

    public string LoanId { get; set; }
    public string SelectedDeptText { get; set; }
    public string LoanType { get; set; }

    public bool ShowTemps { get; set; }
    public string Error { get; set; }
    public string ErrorT { get; set; }
    public string ErrorG { get; set; }
    public bool ShowGeneratePDFBtn { get; set; }
}

_Layout.cshtml

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/modernizr-2.5.3.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.2.913/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2012.2.913/kendo.aspnetmvc.min.js")"></script>

検証クラス

namespace PDFService03Validation.Validations
{
    [MetadataType(typeof(PDFService03_Validation))]
    public partial class PDFService03
    {

}

    public partial class PDFService03_Validation
    {
        public class PDFService03
        {
            [Required(ErrorMessage = "Loan ID Required")]
            [DataType(DataType.Text)]
            public string LoanID { get; set; }

            [Required(ErrorMessage = "Loan Type Required")]
            [DataType(DataType.Text)]
            public string LoanType { get; set; }

            [Required(ErrorMessage = "Department Name Required")]
            [DataType(DataType.Text)]
            public string SelectedDeptText { get; set; }
        }
    }
}

インデックス方式

public ActionResult Index(ViewModelTemplate_Guarantors model)
{
    ViewBag.Error = "";

    model.ShowGeneratePDFBtn = false;

    return View();
}

Index.cshtml- まだオブジェクトが設定されていないと考えています。デバッグするときは、コントローラーに移動し、モデルに変数を設定してから、ここに戻ります。助けてください...ここで何が間違っているのかわかりません。必要に応じてすべてをフォローしたと思います。

再びお邪魔して申し訳ありませんが、私はもうすぐそこにいます....

私はあなたが言ったようにしましたが、まだ検証エラーが発生していません....

以下は、私のビューによって生成される html マークアップです。私が使用しているスクリプトが一番上に表示され、span タグの検証も表示されます。私は何が欠けていますか??? また、私が編集した ViewModel もお見せします。早々にありがとうございました...

ビューモデル

namespace PDFConverterModel.ViewModels
{
    [MetadataType(typeof(ViewModelTemplate_Guarantors_Validation))]
    public partial class ViewModelTemplate_GuarantorsValidation
    {

    }

    public partial class ViewModelTemplate_Guarantors_Validation
    {
        public class ViewModelTemplate_Guarantors
        {
            [Required(ErrorMessage = "Loan ID Required")]
            [DataType(DataType.Text)]
            public string LoanID { get; set; }

            [Required(ErrorMessage = "Loan Type Required")]
            [DataType(DataType.Text)]
            public string LoanType { get; set; }

            [Required(ErrorMessage = "Department Name Required")]
            [DataType(DataType.Text)]
            public string SelectedDeptText { get; set; }
        }
    }

    public class ViewModelTemplate_Guarantors
    {
        public int SelectedTemplateId { get; set; }
        public IEnumerable<PDFTemplate> Templates { get; set; }

        public int SelectedGuarantorId { get; set; }
        public IEnumerable<tGuarantor> Guarantors { get; set; }

        public string LoanId { get; set; }
        public string SelectedDeptText { get; set; }
        public string LoanType { get; set; }

        public bool ShowTemps { get; set; }
        public string Error { get; set; }
        public string ErrorT { get; set; }
        public string ErrorG { get; set; }
        public bool ShowGeneratePDFBtn { get; set; }
    }
}

ページ出力:

<!DOCTYPE html>
<html>
<head>
    <title>BHG :: PDF Generator</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2012.2.913/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2012.2.913/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2012.2.913/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js"></script>
    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/kendo/2012.2.913/kendo.all.min.js"></script>
    <script src="/Scripts/kendo/2012.2.913/kendo.aspnetmvc.min.js"></script>
</head>

<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>BHG :: PDF Generator</h1>
            </div>
        </header>
        <section id="main">


<h2></h2>

<div>

    <table style="width: 1000px">
        <tr>
            <td colspan="5">
                <img alt="BHG Logo" src="/Images/logo.gif" />
            </td>
        </tr>

<form action="/Home/Refresh" id="frmTemps" method="post">            <tr>
                <td>


                <label for="LoanId">LoanId</label>
                <input id="LoanId" name="LoanId" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="LoanId" data-valmsg-replace="true"></span>
                <td colspan="3">
                    <input type="submit" id="btnRefresh" value='Refresh' />
                </td>
            </tr>
            <tr>
                <td><label for="LoanType">LoanType</label>
                    <input id="SBA" name="SBA" type="text" value="SBA" />
                    <span class="field-validation-valid" data-valmsg-for="LoanType" data-valmsg-replace="true"></span>

                </td>
                <td>
                    <label for="ddlDept">Department:</label>
                    <input id="ddlDept" name="ddlDept" type="text" /><script>
    jQuery(function(){jQuery("#ddlDept").kendoDropDownList({"change":Refresh,"dataSource":{"transport":{"read":{"url":"/Home/GetDepartments"}},"schema":{"errors":"Errors"}},"dataTextField":"DepartmentName","dataValueField":"DepartmentID"});});
</script>
                    <span class="field-validation-valid" data-valmsg-for="SelectedDeptText" data-valmsg-replace="true"></span>
                </td>
            </tr>
</form>
    </table>

</div>

<script type="text/javascript">

    $('btnRefresh').on('click', '#btnRefresh', function () {
        Refresh();
    });

    function Refresh() {

        var LoanID = $("#LoanID").val();

        if (LoanID != "") {
            document.forms["frmTemps"].submit();
        }
    }
</script>

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

score 4 · Accepted Answer

ああ...なぜこれが起こっているのか分かります。あなたはこれを忘れています：

@Html.ValidationMessageFor(model => model.LoanId)

を配置しない場合ValidationMessageFor、目立たない検証では、フォームの送信前にこのモデルプロパティを検証する必要があることがわかりません。

したがって、これが必要です：

@Html.LabelFor(model => model.LoanId)
@Html.TextBoxFor(model => model.LoanId)
@Html.ValidationMessageFor(model => model.LoanId)

LoanId最初にプロパティにデータ注釈を入れることを忘れないでください...

詳細については、こちらを参照してください:データ注釈バリデーターによる検証 (C#)

編集

質問に追加のコードを提供した後、検証エラーが表示されない理由を確認できました。

これは、実際にカスタム ViewModelViewModelTemplate_Guarantorsをビューに渡しているために発生します。ご覧のとおり、ビューモデルにはデータ注釈がありません。メタデータクラスで指定したデータ注釈はPDFService03_Validation、型のオブジェクトをビューに渡した場合にのみ有効PDFService03になります。したがって、問題を解決するには、ViewModelTemplate_Guarantorsビューモデルオブジェクトでデータ注釈を複製する必要があります。これはコードの繰り返しであり、ひどく醜いですが、それがどのように機能するかです。

score 2 · Accepted Answer

jquery-1.7.1.min.j
kendo.web.min.js
kendo.aspnetmvc.min.js
kendo.validator.min.js
kendo.dataviz.min.js

これらの5つのファイルは、検証が機能するために必要です。私はあなたがこれらのいくつかを追加したのを見ましたこれらすべてを追加して試してみてください。私もこの問題に直面しましたが、これで問題は解決しました。

また、これについてWeb構成を確認してください。

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

これも必要です。それがうまくいくとは思わない。

asp.net-mvc - カミソリでフォーム検証

2 に答える 2

Related

Reference