ASP.Net MVC 2 - jQuery Validation and Form Submit - DataAnnotations

Question

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

The page has one text box (EnvelopeID per class Envelope). If submit button is clicked and the text box is empty then i want to show an error message. If it is not empty then i want to post ajax request to GetData Action. The action returns partial views (value 1 or 2) or error string.

Problem:

1. Client validation is not happening here.
2. How can i make $(form).submit to adhere to jquery validation and not post the data if empty? I can check for text box being empty or not before posting (manually) but i want to use the proper way.

This same very example works with MSAjax and validation without any problem.

Master Page Head

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

Class:

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

Answer 1

I would suggest you to do something I've described here

Answer 2

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 my version posted in a question I posted jquery.validate lost on ajax replacement and only showing last error

This is how to make it work with the validation summary, but perhaps it can help you figure out your problem. I do know that if you are referencing the microsoft validation javascript and the jquery validation javascript files, they will cause issues with one another.

Answer 3

Maybe you can use this for validate all input fields:

Simple but powerful jquery form validation

Regards...

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