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

Я реализую проверку на стороне клиента в MVC3. Я получил мою форму, показывающую через диалоговое окно jquery, и отправляю сообщение через ajax. Я не уверен, что это необходимо, но я создал частичный класс в моей модели для настройки проверки:

[MetadataType(typeof (FoodMetaData))]
public partial class FOOD
{
    [Bind(Exclude="FoodID")]
    public class FoodMetaData
    {
        [ScaffoldColumn(false)]
        public object FoodID { get; set; }

        [Required(AllowEmptyStrings = false, ErrorMessage = "Please enter a name")]
        public object FoodName { get; set; }

        [Range(1, 200, ErrorMessage = "Please enter a valid amount")]
        public object FoodAmount { get; set; }

        public object StorageDate { get; set; }

        public object ExpiryDate { get; set; }

В настоящее время я получаю подтверждение только в поле количества, если я ввожу строку или число вне диапазона. Однако, если я опустошу поле Имя, ничего не произойдет.

Это моя первая попытка проверки на стороне клиента, и я не знаю, что происходит. Может кто-нибудь дать мне совет ??

Ценю любую помощь, спасибо ...

asp.net-mvc-3,validation,jquery-dialog,

0

Ответов: 2


Вот пример того, как вы могли бы реализовать частичную форму с помощью диалогового окна 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;
    });
}

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


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

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

asp.net-MVC-3, проверка, JQuery-диалог,
Похожие вопросы