Question

我无法为我的生活获得表单验证以处理动态创建的表单。阅读大量关于为动态添加的字段添加特定规则的文章，以及一篇关于动态forms的文章，这些文章表明我正在做我应该做的事情？导致我认为我错过了一些非常明显的东西！

我有一个看起来像的部分视图（将其剪切为单个字段）：

<div class="modalcontent clearfix">
    @using (@Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal", @id = "userForm" }))
    {
        @Html.ValidationSummary("", new { @class = "text-danger" })
        <div class="row">
            <div class="form-group">
                @Html.LabelFor(model => model.User.Email, new { @class = "control-label" })
                @Html.TextBoxFor(model => model.User.Email, new { @class = "form-control" })
            </div>
        </div>
    }
</div>

和电子邮件字段中的相关属性导致以下Html

<div id="modalUserDetails" class="modalBox ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 490px;">
    <div class="modalcontent clearfix">
        <form action="/UserManagement/AddUser" class="form-horizontal" id="userForm" method="post">
            <div class="validation-summary-valid text-danger" data-valmsg-summary="true">
            <ul><li style="display:none"></li></ul>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="control-label" for="User_Email">Email Address</label>
                    <input class="form-control" data-val="true" data-val-email="The Email Address field is not a valid e-mail address." data-val-required="The Email Address field is required." id="User_Email" name="User.Email" type="text" value="">
                </div>
            </div>
        </form>
    </div>
</div>

在我的主页中我有

<div id="modalUserDetails" class="modalBox"></div>

然后我为按钮设置了一个点击处理程序，弹出对话框和对话框本身：

@section Scripts
{
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {

            $("#btnAddUser").click(function () {
                $.ajax({
                    type: "post",
                    url: '/UserManagement/AddUser,
                    success: function (result) {
                        $('#modalUserDetails').html(result);
                        $("#userForm").validate()
                        $('#modalUserDetails').dialog("open");
                    }
                });
            });

            $("#modalUserDetails").dialog({
                autoOpen: false,
                height: 600,
                width: 800,
                modal: true,
                draggable: false,
                buttons: [
                    {
                        text: "Save",
                        click: function () {
                            if ($('#userForm').valid()) {
                                alert('form is valid');
                            } else {
                                alert('form is not valid');
                            }
                        }
                    },
                    {
                        text: "Cancel",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        });
    </script>
}

我的理解是，在创建表单之后调用validate（），它应该通过查看输入字段的各种atttribute来设置规则，然后调用valid（）来验证表单但是它总是说表格是有效的。

我尝试过各种各样的行为，例如在打开对话框后无法使用click（）处理器中的validate（）调用

任何建议或指导意见。

jQuery验证动态表单对话框

0 个答案: