Kendo Validator 未针对 MVC 部分视图触发

Posted 2023-05-09

【中文标题】Kendo Validator 未针对 MVC 部分视图触发

【英文标题】：Kendo Validator not firing for MVC partial view

【发布时间】：2014-11-25 18:42:03

【问题描述】：

我正在努力弄清楚为什么我的剑道验证不起作用......但首先让我备份一下。

我有一个带有页面和按钮的 mvc 5 Web 应用程序。单击该按钮，模态 kendoWindow 将显示部分视图以捕获来自用户的两个输入。我有我认为的传统 MVC 验证过程。

[Validator(typeof(MyModelValidator))]
public partial class MyModel
 ... 

但是它会以无效模型（我正在测试无效提交）状态发布到控制器然后立即抛出错误，因为它无法完全处理更新它刚刚来自验证的“模态”部分视图检查必填字段消息。

所以在研究和阅读之后，我确定......也许是错误的......使用剑道验证器是这种情况的唯一选择。

所以我开始着手实施以下 Telerik 文档。

在模型中，我有 5 个属性，但我只装饰了一个，我认为我会在完成所有这些之前将其散列在一个上。所以我注释掉了我的 MVC 验证器并将其添加到我的模型中：

[Required]
[Display(Name = "Financial Named")]
public virtual string FinancialInstitutionName  get; set; 

在cshtml中：

 ....snip.....
    @Html.LabelFor(model => model.FinancialInstitutionName):
 </td>
 <td>
    @Html.EditorFor(model => model.FinancialInstitutionName)
    @Html.ValidationMessageFor(model => model.FinancialInstitutionName)
 </td>
 .....and further down.....
 $(function ()
 
    $("#formCreateEditFinancier").kendoValidator();
 );

还有控制器：

public ActionResult CreateEditFinancialInstitute(int financierId, int isChanging)

  var model = new FinancierModel();
  return
  PartialView("~/.../CreateEditFinancialInstitute.cshtml", model);

现在上面是在模态对话框中呈现局部视图时生成/消耗的内容。

以下是“父”页面使用的带有启动模态对话框的按钮...

 var window = $("#window").kendoWindow(
 
    modal: true,
    width: "600px",
    height: "400px",
    title: "Fill in the blanks eh...",
    actions: ["Close"],
    content: 
               url: "@Html.Raw(Url.Action("CreateEditFinancialInstitute", "FinancingPayment"))",
               data:  financierId: financierid, isChanging: ischanging 
              
   );
   window.data('kendoWindow').center();

最后是生成的模态窗口的html。

<form id="formCreateEditFinancier" action="/FinancingPayment/CreateEditFinancialInstitute" method="post" novalidate="novalidate" data-role="validator">    

novalidate 属性是什么？我阅读了它，它似乎是 html 5 正在注入的东西......我当然没有指定它。所以我添加了一个json行来摆脱它。

$("#formCreateEditFinancier").removeAttr("novalidate");

HTML 在没有它的情况下呈现，但我仍然没有客户端验证？？？？

所以最后我想要的只是某种形式的验证......我的意思是更糟糕的情况我可以使用一些非常老派的 json 检查字段长度等......但希望使用更当前的方法。

编辑

---

根据 iceburg 的建议，我将模态窗体窗口 javascript 修改为：

var validator = $("#formCreateEditFinancier").kendoValidator().data("kendoValidator");

    $("form").submit(function (event)
    
        event.preventDefault();
        if (validator.validate())
        
            alert('gtg');
        
        else
        
            alert('fail');
        
    );

现在，当我加载表单并点击提交（未填写任何字段）时，它会显示警报 GTG....等等，它应该失败了！

现在查看 HTML 是否正在呈现验证装饰。

<input name="FinancialInstitutionName" class="text-box single-line" id="FinancialInstitutionName" type="text" value="" data-val="true" data-val-required="The Financial Named field is required.">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="FinancialInstitutionName"></span>

似乎“必需”属性没有设置。如果我在 F12 开发工具中编辑 HTML 添加必需的属性然后点击提交我的验证工作正常......所以问题似乎在于我的模型如何正在渲染装饰。

已解决

---

因此，在 iceburg 的指导下，我发现我的 DataAnnotations 没有正确呈现......实际上结果是这样，但我错过了这里解释的验证器 js 文件：

Data annotations not working in view model

【参考方案1】：

验证通常通过在提交表单时验证表单中的输入字段来工作。您可以将 Url Action 更改为输入类型提交，它应该可以工作。或者在您的按钮单击处理程序中手动调用 kendo 验证器 .validate() 方法。 保留对您的验证器的引用：

var validator = $("#formCreateEditFinancier").kendoValidator().data("kendoValidator");

然后点击按钮：

if(validator.validate())
//submit

else
//not valid show errors.

请看这里： http://demos.telerik.com/kendo-ui/validator/index

至于没有验证，我相信 kendo 或 mvc 正在添加它。它告诉浏览器不要使用 HTML 5 内置的验证。