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" 
       } 
      } 
     });