ASP.Net MVC 2 - jQuery 验证和表单提交 - DataAnnotations

Question

我有一个示例应用程序，试图在这个场景中学习 jQuery 验证和提交表单。

该页面有一个文本框（每个类信封的信封 ID）。如果单击提交按钮并且文本框为空，那么我想显示一条错误消息。如果它不为空，那么我想将 ajax 请求发布到 GetData Action。该操作返回部分视图（值 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

我建议您执行我在此处

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 在 ajax 替换时丢失并且仅显示最后一个错误

这是如何使其与验证摘要一起工作，但也许它可以帮助您找出问题。我确实知道，如果您引用 microsoft 验证 javascript 和 jquery 验证 javascript 文件，它们将导致彼此出现问题。

Answer 3

也许您可以使用它来验证所有输入字段：

简单但强大的 jquery 表单验证

问候...

Answer 4

<% using (Html.BeginForm("Register", "User", FormMethod.Post, new { 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"
                }
            }
        });