为什么验证消息不会显示在 Jquery 对话框上？

Question

我写了一个简单的jquery dialog 来将两个字段保存到数据库中。然而，为了方便控制​​器，它实际上并没有保存到数据库，而是创建了一个模拟对象并将其作为 json 返回给客户端。

表格代码是

<input type="button" name="name" value="New Entry Dialog" id="newDialog"/>
    <div id="frm2" style="display:none">
    <table>
    <thead>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@Html.LabelFor(x => x.emp.FirstName, new { @class = "form-control"})</td>
            <td>@Html.TextBoxFor(x => x.emp.FirstName, new { @class = "form-control", id="firstName" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.FirstName)</td>
        </tr>
         <tr>
            <td>@Html.LabelFor(x => x.emp.LastName, new { @class = "form-control" })</td>
            <td>@Html.TextBoxFor(x => x.emp.LastName, new { @class = "form-control", id="lastName" })</td>
            <td>@Html.ValidationMessageFor(x => x.emp.LastName)</td>
        </tr>
         <tr>
            <td></td>
            <td></td>
            <td>
                <input type="button" value="Save" class="btn btn-success" id="saveDialog"/>
                <input type="reset" value="close" class="btn btn-success" id="closeDialog"/>
            </td>
        </tr>
    </tbody>
</table>
        </div>

JQUERY 用于dialog，输入验证并发送到数据库：

@section Scripts {
    <script>


        $(document).ready(function () {


            //POST 2
            var form = $('#frm');

            //the dialog and validations (reparsing the validaotor)
            $('#frm2').dialog({
                title: 'new entry',
                modal: true,
                width: 600,
                heigth: 400,
                draggable: false,
                resizable: false,
                closeOnEscape: true,
                autoOpen: false,
                show: { effect: "scale", duration: 200 },
                open: function (event, ui) {
                    $(this).load(function (html) {
                        var form = $('#frm2');
                        form.data('validator', null);
                        $.validator.unobtrusive.parse(form);

                        //$('#form1', html).submit(function () {
                        //    $.ajax({
                        //        url: this.action,
                        //        type: this.method,
                        //        data: $(this).serialize(),
                        //        success: function (res) {
                        //            if (res.success) {
                        //                $('#frmDetails').dialog('close');
                        //            }
                        //        }
                        //    });
                        //    return false;
                        //});
                    });
                }

            });

            $('#newDialog').click(function () {
                $('#frm2').dialog('open');
            });

            //save to db
            $('#saveDialog').click(function (evt) {

                var x = {'FirstName': $('#firstName').val(), 'lastName':$('#lastName').val()};
                $.ajax({
                    url: '@Url.Action("Save", "Employee")',
                    method: 'post',
                    data: JSON.stringify({ 'em': x }),
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (data) {
                        alert('record saved');
                    },
                    error: function () { alert('error');}
                });
            });

这是我的模型

public class EmployeeModel
{
    public int EmpID { get; set; }

    [Required]
    public string FirstName { get; set; }

    [Required]
    public string LastName { get; set; }
}

这里是保存的控制器和动作

[HttpPost]
public ActionResult Save(EmployeeModel em)
{
    try
    {
        if (ModelState.IsValid)
        {
            // TODO: Add insert logic here
            EmployeeModel e = new EmployeeModel { FirstName = em.FirstName, LastName = em.LastName };
            return Json(e, JsonRequestBehavior.AllowGet);    
        }

        return View();

    }
    catch
    {
        return View();
    }
}

保存到数据库可以正常工作，服务器端验证也成功，但客户端验证不会在对话框中显示错误。如何更正我的代码？

here is the video

Answer 1

为了使客户端验证正常工作，您需要在 <form> 元素中包含输入。改变你的

<div id="frm2" style="display:none">

到

<form id="frm2" style="display:none">