ASP.Net MVC 2 - jQuery驗證和表單提交 - DataAnnotations

Question

我有一個示例應用程序，試圖學習jQuery驗證並在此場景中提交表單。

該頁面有一個文本框（每個類信封的EnvelopeID）。如果點擊提交按鈕，文本框是空的，那麼我想顯示一條錯誤消息。如果它不是空的，那麼我想發佈一個Ajax請求到GetData操作。該操作返回部分視圖（值1或2）或錯誤字符串。

問題：

1. 客戶端驗證不在這裏發生。
2. 我如何使$(form).submit堅持jQuery驗證，並且不會發布數據如果爲空？我可以檢查文本框是空的或不張貼（手動），但我想使用正確的方法。

這個相同的例子適用於MSAjax和驗證沒有任何問題。

母版頁頭

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

類：

namespace PartialViews.Models 
    { 
     public class Envelope 
     { 
      [Required(ErrorMessage="Envelope ID is required!")] 
      public string EnvelopeID { get; set; } 
     } 
    } 

數據操作：

[HttpPost] 
public ActionResult GetData(Envelope envelope) 
{ 
    ActionResult result = null; 
    if (ModelState.IsValid) 
    { 
     Information myInfo = newInformation(); 
     if (envelope.EnvelopeID == "1") 
     { 
      result = View("TQ1PV", myInfo); //partial view 
     } 
     elseif (envelope.EnvelopeID == "2") 
     { 
      result = View("TQ2PV", myInfo); //partial view 
     } 
     else 
     { 
      result = Content("Error"); 
     } 
    } 
    else 
    { 
     result = View("index", envelope); 
    } 
    return result; 
} 

指數操作：

public Action Result Index() 
{ 
    return View(); 
} 

上查看JS - 指數

<script type="text/javascript"> 
    $(function() { 
     //onload 
     $("#evid").focus(); 
     $("form[name='EVIDForm']").submit(function() { 
      var action = $(this).attr('action'); 
      var evid = $("#evid").val(); 
      var tdata = $(this).serialize(); 
      alert(tdata); 
      $message = $("#resultDiv"); 
      $message.html('').removeClass("red"); 
      $.ajax({ 
      cache: false, 
      type: "post", 
      url: action, 
      data: tdata, 
      dataType: "html", 
      error: function (xhr, ajaxOptions, thrownError){ 
        alert('system error'); 
       }, 
       success: function(data){ 
      if (data == 'Error') 
         $message.html("No such EV ID found!").addClass("red"); 
        else 
         $message.html(data); 
      } 
     }); 
      return false; 
     }); 
    }); 

</script> 

上查看HTML - 指數：

<% Html.EnableClientValidation(); %> 
    <%= Html.ValidationSummary() %> 

    <% using (Html.BeginForm("GetData", "Info", FormMethod.Post, new {name = "EVIDForm" })) 
     {%> 
     <%= Html.LabelFor(model => model.EnvelopeID) %> &nbsp;&nbsp; 
     <%= Html.TextBoxFor(model => model.EnvelopeID, new { maxlength = "8"})%> 
     <%= Html.ValidationMessageFor(model => model.EnvelopeID,"*") %> 
     <br /><br /> 


     Correct EVIDs are 1 and 2. All other entries will result in an error. 
     <br /><br /> 
     <input type="submit" value="submit" /> 
    <%} %> 
    <div id="resultDiv" style="margin-top: 20px;"></div> 

感謝

Answer 1

我會建議你做什麼我描述here

Answer 2

http://geekswithblogs.net/stun/archive/2010/02/27/asp.net-mvc-client-side-validation-summary-with-jquery-validation-plugin.aspx

如果你想看到完整的JavaScript，我有我的版本發佈在一個問題我張貼jquery.validate lost on ajax replacement and only showing last error

這是如何使它工作與驗證總結，但也許它可以幫助你找出你的問題。我知道如果你引用微軟驗證的JavaScript和jQuery驗證的JavaScript文件，它們會導致另一個問題。

Answer 3

也許你可以用這個驗證所有輸入字段：

Simple but powerful jquery form validation

的問候......

Answer 4

使用<％（Html.BeginForm（ 「寄存器」， 「用戶」，FormMethod.Post，新{ID = 「RegisterForm」}））

$("#RegisterForm").validate({ 

      rules: { 
       ignore: ":not(:visible)", 
       EmailAddress: { 
        required: true, 
        email: true 
       }, 
       ConfirmEmailAddress: { 
        required: true, 
        email: true, 
        equalTo: "#EmailAddress" 
       }, 
       Password: { 
        required: true 
       }, 
       ConfirmPassword: { 
        required: true, 
        equalTo: "#Password" 
       } 
      }, 
      messages: { 
       EmailAddress: { 
        required: " Email Address is required", 
        email: " Email Address is invalid" 
       }, 
       ConfirmEmailAddress: { 
        required: " Email Address is required", 
        email: " Email Address is invalid", 
        equalTo: "Enter Email Address same as above" 
       }, 
       Password: { 
        required: " Password is required" 
       }, 
       ConfirmPassword: { 
        required: " Password is required", 
        equalTo: " Enter Confirm Password same as above" 
       } 
      } 
     });