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

Question

我一直在使用xVal框架进行一些开发,以便在服务器端链接模型的一些验证规则,以及使用jQuery Validation插件和用于提交表单的jQuery Form插件的一些客户端验证.

但是,我在将它们连接在一起时遇到了问题.

我正在努力实现以下目标:

1. 允许客户端使用通过调用rules("add", options")jQuery Validation的插件定义的规则来执行基本验证(这是xVal用于获取模型上服务器端定义的规则的内容).

2. 如果客户端验证成功,则调用服务器以再次输入执行验证的表单数据(在客户端上验证的项目,以及无法在客户端中执行的任何其他验证).

3. 让服务器返回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表单发布此表单时,验证不会发生在表单值上.表单提交,但值根本没有验证.

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

Answer 1

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

添加指定的规则并返回第一个匹配元素的所有规则. 需要验证父表单,即$("form").首先调用validate().

当jQuery Form插件发挥作用,并且你想通过AJAX提交表单时,这一点尤为重要,因为你必须submitHandler在调用中设置一个选项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("add", options).

如果没有,则忽略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."
        }
    }
}

鉴于此,传递给参数的success字段optionsajaxSubmit应该是明确的:

// 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).

如果未定义,则它将获取映射并将其传递给showErrors调用返回的验证器,使用调用validate(options)指定的定位和样式设置错误消息validate(options).