ASP.Net MVC 3 client side validation with a dynamic form

Question

I am trying to do manual validation so I can post my form via AJAX.

ALSO I am loading my form dynamically using $("#formHolder").load(url);

When I load the page into the DIV it always validates as true, even though my input box is empty.

i.e call if($("#MyForm").valid()) //is always true

However If I go to the page URL directly it works ok.

So how can I initialise the Form correctly after loading it via .load(url); since it does not exist on the page when first opened

My Javascript is

$('.myLink').click(function () {
    var url = '/newsletter/info/'; // this loads my HTML form from another page/view at runtime
    $("#formHolder").load(url, function () {
            $("#MyForm").validate(); // I thought this line would initialise it once it loads
           }).dialog({
        modal: true,
        width:800,
        height: 600
    });
    return false;
});

Daveo · Accepted Answer · 2013-02-15 22:29:01Z

16

Calling $.validator.unobtrusive.parse() manually after the form has been loaded works

I found the solution here http://btburnett.com/2011/01/mvc-3-unobtrusive-ajax-improvements.html

edited Feb 15, 2013 at 22:29

answered Mar 11, 2011 at 14:09

Daveo

20k10 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ulrichb Over a year ago

hint: you need to specify a selector: e.g. parse('body')

Diego Over a year ago

Agree with @ulrichb. Without a selector (or a jQuery object) it didn't work for me. BTW: bigger scope will mean worst performance, so instead of 'body' you should send $("#MyForm") or whatever element you loaded dynamically

Abdul Qadir Memon · Accepted Answer · 2012-01-01 19:08:43Z

10

The best solution is to call $.validator.unobtrusive.parse('#frmToBeValidated'), right after your ajax load of dynamic form.

edited Jan 1, 2012 at 19:08

user212218

answered Aug 20, 2011 at 20:29

Abdul Qadir Memon

1,0591 gold badge15 silver badges30 bronze badges

Comments

Yngve B-Nilsen · Accepted Answer · 2011-03-11 13:06:10Z

8

Your question does not specify if you need to do anything custom to validate the form, so I would definitely go with MVC3's built in jquery unobtrusive validation:

If this is your model:

public class Person
{
    [Required(ErrorMessage = "Email address required")]
    [DataType(DataType.EmailAddress, ErrorMessage = "Please enter valid email address")]
    public string Email { get; set; }
}

this Form-code in your view will enable validation instantly with a minimum amount of settings:

@model MvcApplication12.Models.Person

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Ajax.BeginForm(new AjaxOptions())) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Person</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

If you want more functionality when the form is posted you can use AjaxOptions:

new AjaxOptions() { UpdateTargetId = "formupdate", 
                    OnSuccess = "javascript:alert('success');", 
                    OnFailure = "javascript:alert('failure');", 
                    OnComplete = "javascript:alert('complete');", 
                    OnBegin = "javascript:alert('begin');" })

This gives you full control over custom actions as the form is submitted, completed, fails or begins.

Hope this helps!

edited Mar 11, 2011 at 13:06

answered Mar 11, 2011 at 12:58

Yngve B-Nilsen

9,6762 gold badges38 silver badges51 bronze badges

2 Comments

Daveo Over a year ago

thanks that is an excellent answer and I did learn alot from it. However after some digging around I realised my issue only occurs when the form is loaded on the fly and I have updated/changed my question significantly at the same time you answered. sorry. But I think your email will help many ppl all the same

Yngve B-Nilsen Over a year ago

aha :) I'm pretty sure this then has to do with how the validator-javascript hooks up events. Since the elements are not there on page load, but are added to the DOM later, it might not register the events correctly (not using .live() for instance). I must say I've never used the .validate() method, so not really sure what that does.

Collectives™ on Stack Overflow

ASP.Net MVC 3 client side validation with a dynamic form

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related