如何将jQuery Validation插件与元数据，jQuery Forms和xVal一起使用？
我一直在使用xVal框架进行一些开发， 以便在服务器端链接模型的一些validation规则，以及使用jQuery Validation插件和jQuery Form插件提交表单的一些客户端validation。
但是，我在将它们连接在一起时遇到了问题。
我正在努力实现以下目标：
-
允许客户端使用为jQuery Validation调用
rules("add", options")插件定义的rules("add", options")来执行基本validation（这是xVal用于获取模型上服务器端定义的规则的内容）。 -
如果客户端validation成功，则调用服务器以再次输入执行validation的表单数据（在客户端上validation的项目，以及无法在客户端中执行的任何其他validation）。
-
让服务器返回JSON中的对象，该对象指示可能具有特定字段的任何错误，然后设置字段的错误显示。
我通过以下方式调用xVal，在ASP.NET MVC页面中设置了插件的元数据：
<%= Html.ClientSideValidation("model") %>
这在客户端转换为以下内容：
xVal.AttachValidator("model", { "Fields": [ { "FieldName":"title", "FieldRules": [ { "RuleName":"Required", "RuleParameters":{} }, { "RuleName":"StringLength", "RuleParameters": { "MaxLength":"250" } } ] }, { "FieldName":"body", "FieldRules": [ { "RuleName":"Required", "RuleParameters":{} } ] } ] }, {})
上面的内容实际上只是转换为jQueryvalidation器插件随后处理的一系列rules("add", options)调用rules("add", options) 。
但是，当尝试通过jQuery表单发布此表单时，validation不会发生在表单值上。 表单提交，但值根本没有validation。
如何使用jQuery Form插件提交表单，同时通过调用ajax来validationjQuery Validation插件？
将所有这些放在一起时要注意的最重要的事情是一小段文档（在xVal的文档中并不明显，它在调用中抽象了对rules("add", options)的调用rules("add", options) 。 xVal.AttachValidator ）用于rules("add", options) （强调我的）：
添加指定的规则并返回第一个匹配元素的所有规则。 需要validation父表单，即$（“form”）。首先调用validate（）。
当jQuery Form插件发挥作用，并且你想通过AJAX提交表单时，这一点尤为重要，因为你必须在调用validate(options)设置一个submitHandler选项，如下所示：
由于上面引用的关于rules("add", options)调用的文档rules("add", options) ， 对调用validate(options)的调用必须在调用rules("add", options)之前rules("add", options) 。
如果没有，则忽略submitHandler，从不调用。
最后，这意味着您将客户端代码放在一起时必须看起来像这样：
<%= Html.ClientSideValidation("model") %>
最后，通过所有这些连线，最后要做的是当服务器端方法返回时该怎么做。
您将希望从这些调用返回的JSON类似于标准化的viewmodel 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." } } }
鉴于此，传递给ajaxSubmit 的options参数的success字段应该是明确的：
// 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）。
如果未定义，则它将获取映射并将其传递给validation器validate(options)调用返回的validation器上的showErrors ，使用调用validate(options)指定的定位和样式设置错误消息。