与MVC和jQuery

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()其中I移动，这是在$(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()函数

在萤火虫的帮助下，我在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

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

Answer 3

您可以按照example：

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

型号：

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 4

好了，这里就是我做得到MicrosoftMvcJQueryValidation在一个AJAX/PartialView环境为我工作。这是相关的，因为基本上这两个实例（我的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 5

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

jQuery的验证插件的选项让您能够更改哪个事件触发验证。从http://docs.jquery.com/Plugins/Validation/validate#toptions，我们有以下选项属性：onsubmit,onfocusout和onkeyup。您应该能够适当地分配这些选项值，并让jQuery验证表现得像你想要的。

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