Проверка на стороне клиента ASP.Net MVC 3 с динамической формой

Я пытаюсь выполнить ручную проверку, чтобы я мог опубликовать свою форму через AJAX.

ТАКЖЕ Я динамически загружаю свою форму, используя $("#formHolder").load(url);

Когда я загружаю страницу в DIV, она всегда проверяется как истина, хотя поле ввода пусто.

i.e вызов if($("#MyForm").valid()) //is always true

Однако, если я перейду к URL-адресу страницы, он работает нормально.

Итак, как я могу правильно инициализировать форму после ее загрузки через .load(url);, так как она не существует на странице при первом открытии

Мой Javascript

$('.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;
});

Ответ 1

Вызов $.validator.unobtrusive.parse() вручную после загрузки формы работает

Я нашел решение здесь http://btburnett.com/2011/01/mvc-3-unobtrusive-ajax-improvements.html

Ответ 2

Лучшим решением является вызов $.validator.unobtrusive.parse('#frmToBeValidated') сразу после загрузки ajax динамической формы.

Ответ 3

В вашем вопросе не указывается, нужно ли вам делать что-либо обычай для проверки формы, поэтому я бы определенно пошел с MVC3, встроенным в jquery, ненавязчивой проверкой:

Если это ваша модель:

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

этот код формы в вашем представлении мгновенно активирует проверку с минимальным количеством настроек:

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

Если вам нужна дополнительная функциональность при отправке формы, вы можете использовать AjaxOptions:

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

Это дает вам полный контроль над пользовательскими действиями по мере того, как форма отправляется, завершается, завершается неудачно или начинается.

Надеюсь, это поможет!