MVC2 Jquery模式对话框中的客户端验证

Question

使用MVC2我目前有一个视图创建一个包含编辑局部视图的jquery对话框。在提交时，我正在寻找它在Email类中执行客户端验证，该类具有电子邮件地址所需的数据注释属性。服务器端验证工作正常，但我希望用户必须修复模态对话框中的错误。

下面是代码

<% Html.EnableClientValidation(); %> 
<% using (Html.BeginForm()) 
<div> 
<label for="EmailAddress"> 
        Email Address : 
       </label> 
<%= Html.TextBoxFor(model => model.Email.EmailAddress)%> 
<%= Html.ValidationMessageFor(model => model.Email.EmailAddress)%> 
</div> 

脚本我加载了是

<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.3.2.min.js")%>"></script> 
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jqueryUI/js/jquery-ui-1.7.2.custom.min.js")%>"></script> 
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/Splitter/splitter-1.5.js")%>"></script> 
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/Scripts/Start.js")%>"></script> 
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/Scripts/extended/ExtendedControls.js")%>"></script> 
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery.validate.js")%>"></script> 
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/MicrosoftMvcJQueryValidation.js")%>"></script> 

查看HTML生成的，我没有得到任何的客户端验证产生的JSON数据的工作。

任何解决方案欣然赞赏。 S

Answer 1

我强烈建议您使用jquery验证脚本。

jquery.validate.js具有在jQuery对话框中进行客户端验证的所有功能。

首先，在jquery.validate.js添加到您的Site.Master：

<script src="/Scripts/Using/jquery.validate.js" type="text/javascript"></script> 

，然后写脚本这样的事情：

<script type="text/javascript"> 
    var createLinkObj; 
    $(function() { 

     $('#mydialog').dialog({ 
      autoOpen: false, 
      width: 500, 
      modal: true, 
      buttons: { 
       "OK": function() { 

        $("#myForm").validate({ 
         rules: { 
          Name: { 
           required: true 
          }, 
          Email: { 
           required: true, 
           email: true 
          } 
         }, 
         messages: { 
          Name: " * ", 
          Email: { 
           required: " * ", 
           email: " Invalid e-mail."       
         } 
       }); 

       $("#myForm").submit(); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

    $(".mylink").click(function() { 
     //change the title of the dialog 
     createLinkObj = $(this); 
     var dialogDiv = $('#mydialog'); 
     var viewUrl = createLinkObj.attr('href'); 
     $.get(viewUrl, function (data) { 
      dialogDiv.html(data); 
      dialogDiv.dialog('open'); 
     }); 
     return false; 
    }); 
}); 
</script> 

正如你可以看到我的时候点击mylink，出现mydialog，在提交myForm之前，我验证了myForm元素，即Name和Email。

认为您的表单只包含名称和电子邮件，然后您可以通过使用jquery验证脚本来验证这些元素。