Question

我使用jquery对话框显示了很多表单，我希望在其上添加客户端验证。我通读了一些例子，说mvc 3已经以某种方式支持jquery客户端验证，但我尝试了包含必要的脚本，我的表单是这样的：

 @using (Html.BeginForm("CreateFood", "Home", FormMethod.Post, new { id = "formData" }))
       {
           @Html.ValidationSummary(false, "Please fix these errors.")

当我尝试在不填写必填字段的情况下提交表单时，我仍然会收到任何消息。谁能给我更多的想法/解释/例子？

这里真的需要帮助......谢谢......

更新（在我的对话框的脚本中添加）

 $createdialog.dialog("option", "buttons", {
        "Cancel": function () {
            //alert('Cancel');
            $createdialog.dialog('close');

        },
        "Submit": function () {

            var frm = $('#formData');
            $.ajax({
                url: '/Food/CreateFood',
                type: 'POST',
                data: frm.serialize(),
                success: $createdialog.dialog('close')
            });
        }
    });

删除后，打开对话框：

  // Once drop, open dialog to create food
    options.drop = function (event, ui) {
        // Get the ContainerImgName which food dropped at
        var cimg = $(this).attr('id');
        // Pass in ContainerImgName to retrieve respective ContainerID
        // Once success, set the container hidden field value in the FoodForm
        $.ajax({
            url: '/food/getcontainerid',
            type: 'GET',
            data: { cImg: cimg },
            success: function (result) { $('#containerID').val(result); }
        });
        clear();
        $.validator.unobtrusive.parse($createdialog);
        $createdialog.dialog('open');
    };

Answer 1

我遇到了同样的问题，解决了：

 $(name).dialog({
            autoOpen: true,
            width: options.witdth,
            heigth: options.height,
            resizable: true,
            draggable: true,
            title: options.title,
            modal: true,
            open: function (event, ui) {
                // Enable validation for unobtrusive stuffs
                $(this).load(options.url, function () {
                    var $jQval = $.validator;
                    $jQval.unobtrusive.parse($(this));
                });

            }
        });

当然你可以在对话的close事件上添加验证，取决于你正在做什么，在我的情况下，弹出窗口只是为了显示错误，所以我已经对内容的加载进行了验证。（这个弹出窗口显示的是Action结果）

Answer 2

对于每个动态生成的表单，您需要在将此内容注入DOM后手动运行验证程序，如this blog post中使用$.validator.unobtrusive.parse函数所示。

关于jQuery对话框的MVC 3客户端验证

2 个答案: