Asp.net mvc 使用MVC和jQuery进行内联客户端验证

我已经设置了一个简单的示例来显示jQueryUI对话框中的表单，并希望在该表单上启用内联客户端验证

然后，我将脚本添加到我的母版页

<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery-1.4.3.min.js" )%>"></script>
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.validate.min.js" )%>"></script>
<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/MicrosoftMvcJQueryValidation.js" ) %>"></script> 

然后我通过以下代码启用了客户端验证

<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm() { %>
<% } %>

然后，我不知道如何为每个输入启用内联验证，因此当用户离开其中任何一个输入的焦点时，验证就会发生

客户端验证似乎只有在我完成提交之后才起作用。但这不是“客户端验证”，因为属性是从我的服务器代码中验证的

---

有什么建议吗？

您需要将输入字段绑定到控制器中的属性，然后在属性上使用必需的属性-请参见示例。

您可以按照以下步骤操作：

MicrosoftMvcJQueryValidation.js中的脚本有问题，必须更新。 在步骤3中更改脚本MicrosoftMvcValidation.js

型号：

Namespace Models

    Public Class Customer

        Private _Name As String = ""
        <DisplayName("Name")> _
        <Required(ErrorMessage:="{0}: Mandatory field.")> _
        <StringLength(10, ErrorMessage:="{0}: Max lenght 10.")> _
        Public Property Name() As String
            Get
                Return _Name
            End Get
            Set(ByVal value As String)
                _Name = value
            End Set
        End Property

        Private _Surname As String = ""
        <DisplayName("Surname")> _
        <Required(ErrorMessage:="{0}: Mandatory field.")> _
        <StringLength(10, ErrorMessage:="{0}: Max lenght 10.")> _
        Public Property Surname() As String
            Get
                Return _Surname
            End Get
            Set(ByVal value As String)
                _Surname = value
            End Set
        End Property

    End Class

End Namespace



   <%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of MvcApplication1.Models.Customer)" %>
    <%@ Import Namespace="MvcApplication1.jQuery" %>

    ...
    <% Html.EnableClientValidation()%>
    <%  Using (Html.BeginForm())%>
        <fieldset id="FormEditSet">
            <div>
                <div>
                    <%=Html.LabelFor(Function(m) m.Name)%>
                    <%=Html.EditorFor(Function(m) m.Name)%>
                     <%=Html.ValidationMessageFor(Function(m) m.Name, "*")%>
                </div>                    
                <div>
                    <%=Html.LabelFor(Function(m) m.Surname)%>
                    <%=Html.EditorFor(Function(m) m.Surname)%>
                     <%=Html.ValidationMessageFor(Function(m) m.Surname, "*")%>
                </div>
            </div>
        </fieldset>
        <input type="image" src="<%=Url.Content("~/Content/Images/page_save_big.png")%>"
                    value="Save" title="Save" style="border: none;" />
        <%End Using%>

命名空间模型
公共类客户
Private _nameas String=“”
_
_
_
作为字符串的公共属性名（）
得到
返回\u名称
结束
设置（ByVal值作为字符串）
_名称=值
端集
端属性
Private_姓氏为String=“”
_
_
_
公共属性姓氏（）作为字符串
得到
返回姓
结束
设置（ByVal值作为字符串）
_姓=值
端集
端属性
末级
结束命名空间
...

Html.ValidationSummaryJQuery是一种必须定义的新扩展方法（按照示例）。 请记住将脚本放在页面底部：

<script src="<%=Url.Content("~/Scripts/MicrosoftAjax/MicrosoftMvcJQueryValidation.min.js")%>" type="text/javascript"></script>

---

好的，下面是我为让MicrosoftMvcJQueryValidation在AJAX/PartialView环境中为我工作所做的工作。这是相关的，因为基本上这两个实例（我的AJAX/PartialView和你的onBlur触发）都需要显式控制何时调用验证方法。我会尽力捕获您需要做的一切，因为我最终不得不编辑我的MicrosoftMvcJQueryValidation.js文件以使其启用AJAX。然而，我不相信我的任何编辑是你想要的

关键在于能够访问MicrosoftMvcJQuery生成的验证函数。幸运的是，它通过名为

validationCallbacks

的属性将其添加到表单元素中

在我的自定义提交函数中，我像这样访问和调用这些回调（

form

是DOM元素，而不是jQuery对象）：

//这将利用mvc客户端验证功能。
//这是调用jquery.validate（）的一种迂回方式
//这就是callback（）函数中发生的事情
validationCallbacks=form.validationCallbacks；
if（validationCallbacks）{
对于（i=0；i

然后，我让上下文特定的提交函数在继续之前检查

event.cancelBubble

对于您的情况，可以在

blur

事件中为表单中的每个输入调用此代码。诚然，这不是最有效的解决方案，因为validationCallbacks数组中的每个函数都会验证整个表单，但它会触发对每个表单的验证。（validationCallbacks是一个数组，用于支持需要验证的多个表单。）

---

很抱歉，这并不是针对您的具体情况，但它应该可以满足您的需要。

我有我之前的答案，关于如何手动调用MicrosoftMvcJQueryValidation.js创建的验证回调，但是，可能有一个更简单的答案。（我将留下我的第一个答案，作为将来任何人的参考。）

jQuery验证插件的选项使您能够更改触发验证的事件。从中，我们有以下选项属性：

onsubmit

、

onfocusout

和

onkeyup

。您应该能够适当地分配这些选项值，并让jQuery验证按您所希望的方式运行

---

您可能需要调整MicrosoftMvcJQueryValidation.js，以允许在调用验证时设置选项。我不得不用我编辑过的副本来做这件事。

我终于找到了解决办法

首先，我的表单从未绑定到由

MicrosoftMvcJQueryValidation.js

脚本中的代码提供的验证回调。这是因为我使用jQuery对话框，表单在对话框中，脚本包含在母版页中

我对解决方案的第一次尝试是修改MicrosoftMvcJQueryValidation.js。特别是，我添加了一个函数

EnableClientSideValidation（）

，其中我移动了

$（document.ready

函数中的代码，如下代码示例所示

function EnableClientSideValidation() {
    var allFormOptions = window.mvcClientValidationMetadata;
    if (allFormOptions) {
        while (allFormOptions.length > 0) {
            var thisFormOptions = allFormOptions.pop();
            __MVC_EnableClientValidation(thisFormOptions);
        }
    }
}

$(document).ready(function () {
    EnableClientSideValidation();
});

然后，我在脚本块中调用了与我在对话框markup code

$（document.ready（）

函数中放置的相同的函数

在firebug的帮助下，我在

EnableClientSideValidation（）

函数中放置了一个断点，然后体验到只有在主页准备就绪时才调用该断点，而不是从dialo调用该断点

function EnableClientSideValidation() {
    var allFormOptions = window.mvcClientValidationMetadata;
    if (allFormOptions) {
        while (allFormOptions.length > 0) {
            var thisFormOptions = allFormOptions.pop();
            __MVC_EnableClientValidation(thisFormOptions);
        }
    }
}

$(document).ready(function () {
    EnableClientSideValidation();
});

<% using (Html.BeginForm()) { %>

    //DIALOG FORM CODE WAS HERE

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

<% using (Html.BeginForm()) { %>

    //DIALOG FORM CODE WAS HERE

<% } %>

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