Question

使用MVC2我当前有一个视图创建一个包含Edit部分视图的jquery对话框。在提交时，我正在寻找它在Email类上执行客户端验证，该类具有电子邮件地址所需的数据注释属性。服务器端验证工作正常，但我希望用户必须在模态对话框中修复错误。

以下是代码

<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm())
<div>
 <label for="EmailAddress">
                    Email Address :
                </label>
 <%= Html.TextBoxFor(model => model.Email.EmailAddress)%>
 <%= Html.ValidationMessageFor(model => model.Email.EmailAddress)%>
</div>

我正在加载的脚本是

<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.3.2.min.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jqueryUI/js/jquery-ui-1.7.2.custom.min.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/Splitter/splitter-1.5.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/Scripts/Start.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/Scripts/extended/ExtendedControls.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery.validate.js")%>"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/MicrosoftMvcJQueryValidation.js")%>"></script>

查看生成的html我没有获得为客户端验证生成的任何JSON数据。

任何解决方案都很高兴。小号

Answer 1

我强烈建议您使用jquery验证脚本。

jquery.validate.js具有jquery对话框中客户端验证的所有功能。

首先，将jquery.validate.js添加到Site.Master：

<script src="/Scripts/Using/jquery.validate.js" type="text/javascript"></script>

然后编写类似的脚本：

    <script type="text/javascript">
    var createLinkObj;
    $(function () {

        $('#mydialog').dialog({
            autoOpen: false,
            width: 500,
            modal: true,
            buttons: {
                "OK": function () {

                    $("#myForm").validate({
                        rules: {
                            Name: {
                                required: true
                            },
                            Email: {
                                required: true,
                                email: true
                            }
                        },
                        messages: {
                            Name: " * ",
                            Email: {
                                required: " * ",
                                email: " Invalid e-mail."                        
                        }
                });

                $("#myForm").submit();
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

    $(".mylink").click(function () {
        //change the title of the dialog
        createLinkObj = $(this);
        var dialogDiv = $('#mydialog');
        var viewUrl = createLinkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);
            dialogDiv.dialog('open');
        });
        return false;
    });
});
</script>

正如您所看到的，当我点击mylink时，会出现mydialog，在提交myForm之前，我验证了myForm元素，即名称和电子邮件。

认为您的表单只包含名称和电子邮件，然后您可以使用jquery验证脚本验证这些元素。

Jquery模式对话框中的MVC2客户端验证

1 个答案: