自定义验证不适用于 Ajax MVC 调用答案

【问题标题】：Custom Validation not working with Ajax MVC Call自定义验证不适用于 Ajax MVC 调用
【发布时间】：2012-01-18 13:03:47
【问题描述】：

单击按钮时，如果同一页面中的另一个表单（不是 ligthbox）有效，我想提交一个表单。该验证是我创建的自定义验证，并且工作正常。这是视图中的代码

$("#btnSave").click(function (e) {

            if ($("#GeneralButtonFrm").valid()) {

                $("#ButtonFrm").submit();

            } else {
                //Error Message
            } });

问题是提交操作正在执行，而无需等待返回 false 的自定义验证的响应。

知道为什么会这样吗？

注意：我说我没有使用 ligthbox 渲染部分，因为在这种情况下，解决方案是 jQuery.validator.unobtrusive.parse('#form');

谢谢

【问题讨论】：

如果 GeneralButtonFrm 是使用 ajax 渲染的，你必须使用 jQuery.validator.unobtrusive.parse，还是使用 ajax 的自定义验证器？使用 ajax 的验证器有点棘手，您需要返回 false 表示它们无效，然后当您从服务器获得答案时，如果值有效，则需要设置一个标志，然后重新验证表单并根据标志返回 true 或 false。我希望我很清楚：D
感谢您的快速回答。 “无效时返回 false”是什么意思？以及如何/在哪里可以从服务器获得答案？
为了搞清楚一切，您有一个自定义规则尝试使用 ajax 进行验证？
是的，我正在使用 mvc 3.0 的自定义验证。

标签： asp.net-mvc-3 jquery customvalidator

【解决方案1】：

你的问题仍然很模糊。但我认为你想要的是调用 ajax 并进行服务器端验证。如果是这样，问题是您的验证将在 ajax 请求之前返回，因为 ajax 请求是异步的。这样做

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
        <script type="text/javascript">
            jQuery.validator.addMethod("ajaxCustom", function (value, element) {
                var wrap = $(element);
                var url = wrap.data("customAjaxUrl");
                var result;

                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    success: function (data) {
                       result  = data.valid;
                    },
                    data: { value: value, id: element.id },
                    async: false
                });

                return this.optional(element) || result;

            }, "Ajax");

            $.validator.unobtrusive.adapters.addBool('ajaxCustom');
            </script>
        <style type="text/css">
            .input-validation-error {
                background: red;
            }

        </style>

    </head>
    <body>

        <form action="/">
            <input data-val-ajaxCustom="Tuckel" data-val="true" data-val-required="Its required" data-custom-ajax-url="validate.html" />
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

【讨论】：