Question

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

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

<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() { %>
<% } %>

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

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

有什么建议吗？

Answer 1

最后我完成了解决方案。

首先，我的表单从未绑定到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();
});

然后我在脚本块中调用了相同的函数，我在对话框标记代码中放置了$(document).ready()函数

在firebug的帮助下，我在EnableClientSideValidation()函数中放置了一个断点，然后经历了只有在主页面准备好但没有从对话框中调用时才调用的事实。这是因为我在<form>...</form>标记内部有“对话框”脚本块，因此脚本无效。

像这样的代码

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

最后一切都开始了！我要感谢vandalo和kdawg帮助找到解决方案。还有一些东西仍然遗漏，但你的答案刺激了我的脑袋。

我发布的内容可能会遇到同样的问题。

Answer 2

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

关键在于能够访问MicrosoftMvcJQuery生成的验证功能。幸运的是，它通过名为validationCallbacks的属性将其添加到表单元素。

在我的自定义提交函数中，我访问并调用这样的回调（form是DOM元素，而不是jQuery对象）：

// this taps into the mvc clientside validation functionality.
// this is a roundabout way of calling jquery.validate() as
// that is what's going on the in callback() function
validationCallbacks = form.validationCallbacks;
if (validationCallbacks) {
    for (i = 0; i < validationCallbacks.length; i += 1) {
        callback = validationCallbacks[i];
        if (!callback()) {
            // subsequent submit handlers should check for 
            // this value before executing
            event.cancelBubble = true;
            return false;
        }
    }
}

然后我继续使用特定于上下文的提交函数检查event.cancelBubble。

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

对不起，这不是特定于你的情况，但它应该得到你需要的。

Answer 3

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

jQuery的Validation插件选项使您能够更改哪个事件触发验证。从http://docs.jquery.com/Plugins/Validation/validate#toptions开始，我们有以下选项属性：onsubmit，onfocusout和onkeyup。您应该能够适当地分配这些选项值，并使jQuery Validation的行为与您想要的一样。

您可能需要调整MicrosoftMvcJQueryValidation.js以允许设置调用验证时的选项。我不得不用我编辑的副本做到这一点。

Answer 4

您可以按照example：

进行操作

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

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

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

Answer 5

您需要将输入字段绑定到控制器中的属性，然后在属性上使用Required属性 - 有关示例，请参阅http://weblogs.asp.net/scottgu/archive/2010/01/15/asp-net-mvc-2-model-validation.aspx。

使用MVC和jQuery进行内联客户端验证

5 个答案: