如何将 jQuery Validation 插件与元数据、jQuery Forms 和 xVal 一起使用？

Question

我一直在使用 .NET 的 xVal 框架进行一些开发，以链接一些验证规则服务器端的模型以及使用 jQuery 验证插件 以及 < a href="http://jquery.malsup.com/form/" rel="nofollow noreferrer">jQuery 表单插件 用于提交表单。

但是，我在将它们连接在一起时遇到问题。

我试图实现以下目标：

1. 允许客户端使用通过调用 rules("add", options") 用于 jQuery 验证的插件（这是 xVal 用于获取模型服务器端定义的规则的插件）。< /p>

2. 如果客户端验证成功，则调用服务器输入表单数据再次执行验证（针对在客户端验证的项目，以及无法在客户端执行的任何其他验证）。< /p>

3. 让服务器返回一个 JSON 格式的对象，该对象指示可能具有特定字段的任何错误，然后设置字段的错误显示。

   让服务器返回一个 JSON 格式的对象，

我已经通过以下方式调用 xVal 在 ASP.NET MVC 页面中设置了插件的元数据：

<%= Html.ClientSideValidation<Model>("model") %>

这在客户端转换为以下内容：

<script type="text/javascript">
xVal.AttachValidator("model", 
{
    "Fields": 
    [ 
        {
            "FieldName":"title",
            "FieldRules": 
            [
                {
                    "RuleName":"Required",
                    "RuleParameters":{}
                },
                {
                    "RuleName":"StringLength",
                    "RuleParameters":
                    {
                        "MaxLength":"250"
                    }
                }
            ]
        },
        {
            "FieldName":"body",
            "FieldRules":
            [
                {
                    "RuleName":"Required",
                    "RuleParameters":{}
                }
            ]
        }
    ]
}, {})
</script>

上面的内容实际上只是转换为一系列对 rules("add", options) 。

但是，当尝试通过 jQuery 表单发布此表单时，不会对表单值进行验证。表单已提交，但值根本未经过验证。

如何使用 jQuery 表单插件提交表单，同时通过调用 ajax 通过 jQuery 验证插件进行验证？

Answer 1

将所有这些放在一起时要注意的最重要事情是一小段文档（这在 xVal 的文档中并不明显，它抽象了对 rules( 的调用) "add", options) 在调用 xVal.AttachValidator) 中用于 rules("add", options) （强调我的）：

添加指定规则并返回
第一个匹配的所有规则
元素。 要求家长
形式已验证，即
$("form").validate() 被调用
首先。

当 jQuery Form 插件发挥作用，并且您想通过 AJAX 提交表单时，这一点尤其重要，因为您必须在调用 submitHandler 时设置 submitHandler 选项。 a href="http://docs.jquery.com/Plugins/Validation/validate#options" rel="nofollow">validate(options)，如下所示

<script type="text/javascript">
    $(document).ready(function() {
        // Initialize the form.  Store the validator.
        var validator = $("form").validate({

            // Called when the form is valid.
            submitHandler: function(form) {

                // Submit the form via ajax.
                $(form).ajaxSubmit({

                    // The return data type is json.
                    dataType: "json",

                    // The callback on a successful form
                    // submission.
                    success: function(data, statusText) {

                        // If the new location is not null, then
                        // redirect to that location.
                        if (data.data.newLocation) {
                            // Go to the new location.
                            document.location.href = data.data.newLocation;

                            // Get out.
                            return;
                        }

                        // There are errors, pass them to the validator
                        // for display.
                        validator.showErrors(data.data.errors);
                    }
                });
            }
        });
    });
</script>

：上面引用的有关调用 rules("add", options) 的文档，对 validate(options) 的调用必须在对 rules( “添加”，选项）。

如果不这样做，则submitHandler将被忽略，永远不会被调用。

最后，这意味着您的客户端代码在将所有内容放在一起时必须如下所示：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<!-- Note this is only needed if using xVal. -->
<script type="text/javascript" src="xVal.jquery.validate.js"></script>
<!-- The call to validate the form must come first. -->
<script type="text/javascript">
    $(document).ready(function() {
        // Initialize the form.
        $("form").validate({

            // Called when the form is valid.
            submitHandler: function(form) {

                // Submit the form via ajax.
                $(form).ajaxSubmit({

                    // The return data type is json.
                    dataType: "json",

                    // The callback.
                    success: function(data, statusText) {

                        // Alert the users to the message.
                        window.alert(statusText);
                    }
                });
            }
        });
    });
</script>

<!-- Now make the calls to rules("add", options), AFTER the call to -->
<!-- validate (options). It's separated into another block for      -->
<!-- emphasis, but could be done in the block above.                -->
<script type="text/javascript">
    // Make calls to rules("add", options).
</script>

<!-- Or, if you are using xVal, make the following call in the ASP.NET -->
<!-- page but again, note it must come AFTER the call to               -->
<!-- validate(options).                                                -->
<%= Html.ClientSideValidation<Model>("model") %>

最后，将所有这些连接起来后，最后要做的事情是服务器端方法返回时要做什么。

您将希望从这些调用返回的 JSON 类似于标准化视图模型 shell，其中您将特定于响应的内容包装在一个更标准化的部分中，该部分公开了同质调用中所需的信息，如下所示

{
    // An integer, non-zero indicates faulure, with predefined ranges
    // for standard errors across all operations, with other ranges for custom
    // errors which are operation-specific.  Examples of shared errors
    // are not authenticated, not authorized, etc, etc.
    resultCode: 0,

    // A string, which is to be displayed to the user (usually in the
    // form of a jQuery dialog, usually used for the common ranges of
    // errors defined above.
    message: null,

    // An object with operation-specific results.
    data: null
}

：在服务器上，返回与上面相同的内容，但返回一个位置，该位置具有成功时应将用户重定向到的 URL（如果不成功则返回 null）以及可以直接传递到 showErrors(errors) 方法：

{
    resultCode: 0,

    message: null,

    data:
    {
        // Returned as a string.  If not null, then this is the url
        // that the client should be redirected to, as the server-side
        // operation was successful.
        newLocation: null,

        // If not-null, then this is a map which has the names of the
        // fields with the errors, along with the errors for the fields.
        errors:
        {
            "model.title": "The title already exists in the system.",
            "model.body": "The body cannot have malicious HTML code in it."
        }
    }
}

鉴于此， options< 的 success 字段/code> 参数 传递给 ajaxSubmit 应该是明确：

// The callback on a successful form
// submission.
success: function(data, statusText) {

    // If the new location is not null, then
    // redirect to that location.
    if (data.data.newLocation) {
        // Go to the new location.
        document.location.href = data.data.newLocation;

        // Get out.
        return;
    }

    // There are errors, pass them to the validator
    // for display.
    validator.showErrors(data.data.errors);
}

它所做的只是检查 newLocation 属性是否已定义。如果已定义，则它将当前文档重定向到该位置（通常是新保存资源的 url）。

如果未定义，则它将获取地图并将其传递给调用 validate(options) 返回的验证器上的 showErrors，使用定位设置错误消息以及通过调用 validate(options) 指定的样式。