Проверка на стороне клиента jquery работает только в определенном поле (не работает в Обязательном поле)

Answer 1

Вот пример того, как вы могли бы реализовать частичную форму с помощью диалогового окна jQuery.

Как всегда, начнем с вида модели:

public class MyViewModel
{
    [Required]
    public string SomeProperty { get; set; }
}

затем контроллер:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Edit()
    {
        return PartialView(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Edit(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return PartialView(model);
        }
        // TODO: validation passed => process the model and return a JSON success
        return Json(true);
    }
}

и затем ~/Views/Home/Index.cshtmlпредставление, которое будет содержать только ссылку на диалог:

@Html.ActionLink("click me for dialog", "edit", null, new { id = "showDialog" })
<div id="dialog"></div>

и ~/Views/Home/Edit.cstmlчасть, которая будет содержать форму, которую мы хотим показать в диалоге:

@model MyViewModel
@using (Html.BeginForm())
{
    @Html.LabelFor(x => x.SomeProperty)
    @Html.EditorFor(x => x.SomeProperty)
    @Html.ValidationMessageFor(x => x.SomeProperty)
    <button type="submit">Save</button>
}

Теперь осталось только подключиться. Поэтому мы импортируем необходимые скрипты:

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.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>

а затем напишите наш собственный, чтобы оживить диалог:

$(function () {
    $('#showDialog').click(function () {
        $('#dialog').dialog().load(this.href, function (result) {
            ajaxify(this);
        });
        return false;
    });
});

function ajaxify(dialog) {
    // we need to parse client validation rules
    // because the form was injected into the DOM later as
    // part of the dialog. It was not present initially
    // See here for more info: http://weblogs.asp.net/imranbaloch/archive/2011/03/05/unobtrusive-client-side-validation-with-dynamic-contents-in-asp-net-mvc.aspx
    $.validator.unobtrusive.parse($(dialog));

    // AJAXify the form
    $('form', dialog).submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result === true) {
                    // The controller action returned a JSON result
                    // inidicating the success
                    alert('thank you for submitting');
                    $(dialog).dialog('close');
                } else {
                    // there was a validation error => we refresh the dialog
                    // and reajaxify it as we have now modified the DOM
                    dialog.html(result);
                    ajaxify(dialog);
                }
            }
        });
        return false;
    });
}

Теперь вы можете адаптировать это к любой модели представления с любыми шаблонами редактора и правилами проверки.

Answer 2

Я только что узнал, что проверка на стороне клиента jquery запускается только после отправки 1-й формы после того, как я прошел пример здесь: http://weblogs.asp.net/imranbaloch/archive/2011/04/30/eagerly-performing-asp- нетто-3 MVC-ненавязчивый-клиент-сторона-validation.aspx

Отличный! Это помогает решить мою странную проблему, отредактировав файл jquery.validate.unobtrusive (.min) .js следующим образом:

   options: {  // options structure passed to jQuery Validate's validate() method
                errorClass: "input-validation-error",
                errorElement: "span",
                errorPlacement: $.proxy(onError, form),
                invalidHandler: $.proxy(onErrors, form),
                messages: {},
                rules: {},
                success: $.proxy(onSuccess, form),
                onfocusout: function (element) { $(element).valid(); }
            }

Спасибо за любую помощь!