Validate Form with DataAnnotations and JQuery Ajax submission

Question

I am trying to send and validate a form via jquery ajax. I would like to know if it is possible and how to achieve this.

What do I have?

View:

    @using (Html.BeginForm("Index", "Home"))
    {
        <section id="result">
            @Html.ValidationSummary(false)
        </section>

        <section>
            @Html.LabelFor(model => model.Isbn)
            @Html.TextBoxFor(model => model.Isbn)
            @Html.ValidationMessageFor(model => model.Isbn)
        </section>
        <section>
            @Html.LabelFor(model => model.BookNumber)
            @Html.TextBoxFor(model => model.BookNumber)
            @Html.ValidationMessageFor(model => model.BookNumber)
        </section>
        <section>
            @Html.LabelFor(model => model.Title)
            @Html.TextBoxFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </section>
        <section>
            @Html.LabelFor(model => model.ReleaseDate)
            @Html.TextBoxFor(model => model.ReleaseDate)
            @Html.ValidationMessageFor(model => model.ReleaseDate)
        </section>

        <button type="submit">Go</button>
    }

My javascript:

    <script>
            $(function () {
                    $('form').submit(function () {
                            if ($(this).valid()) {
                                    $.ajax({
                                            url: this.action,
                                            type: this.method,
                                            data: $(this).serialize()
                                    })
                                    .success(function (result) {
                                            $('#result').html(result);
                                    })
                                    .error(function () {
                                            alert("oops! some critical stuff");
                                    });
                            }

                            return false;
                    });
            });
    </script>

At last, my controller:

    [HttpPost]
    public ActionResult Index(Book model)
    {
        if (!ModelState.IsValid)
            return View(model);

        if (model.Title.IsEmpty())
        {
            ModelState.AddModelError("Title", "What are you doing?? The title can't be emtpy!");
            return View(model);
        }

        return View();
    }

So, this is just a case study. I wanted to have the DataAnnotations working on the client side, which already are. And when I post the form to the server, perform some more validations via ModelState.IsValid and ModelState.AddModelError and have this shown back to the client.

Is it possible to accomplish this?

When I submit the form I end up with two copies of the view. Possibly because of the target id to be updated. I would like to know which is the best way to do something like this. Try to stick with the ModelState validations or to return the errors on a JSON. — hpinhal
– hpinhal, Commented Mar 23, 2014 at 16:41

SlightlyMoist · Accepted Answer · 2014-03-24 03:39:13Z

Think about what you are doing:

You submit the form to your controller via Ajax
You then return the entire View from the controller (along with any Layouts), and insert it into #result. You now have two copies of the view.

To fix this - make use of a partial view.

i.e. Create a new partial _FormPartial.chstml and place your form contents in it.

@Html.ValidationSummary(false)
    <section>
        @Html.LabelFor(model => model.Isbn)
        @Html.TextBoxFor(model => model.Isbn)
        @Html.ValidationMessageFor(model => model.Isbn)
    </section>
    <section>
        @Html.LabelFor(model => model.BookNumber)
        @Html.TextBoxFor(model => model.BookNumber)
        @Html.ValidationMessageFor(model => model.BookNumber)
    </section>
    <section>
        @Html.LabelFor(model => model.Title)
        @Html.TextBoxFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)
    </section>
    <section>
        @Html.LabelFor(model => model.ReleaseDate)
        @Html.TextBoxFor(model => model.ReleaseDate)
        @Html.ValidationMessageFor(model => model.ReleaseDate)
    </section>

    <button type="submit">Go</button>

Then change your view to use this partial view:

@using (Html.BeginForm("Index", "Home"))
{
    <section id="result">
        @Html.Partial("_FormPartial") 
    </section>       
}

And finally, update the return type of your controller to use PartialView instead of View.

[HttpPost]
public ActionResult Index(Book model)
{
    if (!ModelState.IsValid)
        return PartialView("_FormPartial", model);

    if (model.Title.IsEmpty())
    {
        ModelState.AddModelError("Title", "What are you doing?? The title can't be emtpy!");
        return PartialView("_FormPartial", model);
    }

    return View();
}

Alternatively, look at using Ajax.BeginForm which does the heavy lifting for you.

Collectives™ on Stack Overflow

Validate Form with DataAnnotations and JQuery Ajax submission

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related