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驗證腳本來驗證這些元素。