Geek Answers Handbook

ASP.Net MVC 2 - jQuery validation and form submission - DataAnnotations

I have an example application trying to learn jQuery validation and submit a form in this scenerio.

There is one text box on the page (EnvelopeID for each class envelope). If the submit button is pressed and the text field is empty, then I want to show an error message. If it is not empty, I want to send an ajax request to GetData Action. The action returns partial views (value 1 or 2) or an error string.

Problem:

  • Customer verification does not occur here.
  • How can I get $(form).submit to stick to jquery validation and not post data if it's empty? I can verify that the text field is empty or not before publication (manually), but I want to use the correct path.

This same example works with MSAjax and validation without any problems.

Head of Home

 <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>

Grade:

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

Data Action:

 [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; }

Index Action:

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

JS on View - Index

 <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 to view - index:

  <% 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>

thanks

+4
source share
4 answers

I suggest you do what I described here

0
source

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

And if you want to see the full javascript, I have the version published in the question that I posted jquery.validate, lost when replacing ajax and showing only the last error

This is how to get it working with a validation summary, but maybe it will help you sort out your problem. I really know that if you reference JavaScript javascript and jquery jquery validation files, they will cause problems with each other.

0
source

Perhaps you can use this to check all input fields:

Simple but powerful jquery form validation

Respectfully...

0
source

<% using (Html.BeginForm ("Registration", "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" } } });
0
source

More articles:


All Articles