如何将jQuery Validation插件与元数据，jQuery Forms和xVal一起使用？ [英] How to use the jQuery Validation plugin with metadata, jQuery Forms and xVal together?
问题描述
我一直在使用 xVal .NET框架进行一些开发，以便连接一些服务器端模型的验证规则以及使用 jQuery Validation插件进行的一些客户端验证使用 jQuery Form插件提交表单。
I've been doing some development using the xVal framework for .NET to link up some of the validation rules for models on the server side along with some client side validation using the jQuery Validation plugin along with the jQuery Form plugin for submitting the form.
但是，我在将它们连接在一起时遇到了问题。
However, I'm having problems linking them all together.
我正在努力实现以下目标：
I'm trying to achieve following:
-
允许客户端使用通过调用
规则（添加，选项）插件（这是xVal用于获取规则的定义模型上的服务器端。）
Allow the client to perform basic validation using rules defined by calling
rules("add", options")plugin for jQuery Validation (this is what xVal uses to get rules defined on the server side on the model).
如果客户端验证成功，则调用服务器以再次输入执行验证的表单数据（在客户端上验证的项目，以及无法在客户端中执行的任何其他验证）。
If the client validation succeeds, make the call to the server to input the form data performing validation again (on items that were validated on the client, as well as any other validation which could not be performed in the client).
让服务器返回JSON中的对象，该对象指示可能具有特定字段的任何错误，然后设置字段的错误显示。
Have the server return an object in JSON which indicate any errors which might have specific fields and then set the error display for the fields.
我通过以下方式调用xVal，在ASP.NET MVC页面中设置了插件的元数据：
I've set up the metadata for the plugin in the ASP.NET MVC page through a call to xVal in the following way:
<%= Html.ClientSideValidation<Model>("model") %>
这在客户端转换为以下内容：
This translates into the following on the client side:
<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>
以上内容实际上只是转换为对规则的一系列调用（添加然后jQuery验证器插件处理，选项。
The above really just translates into a series of calls to rules("add", options) which the jQuery validator plugin then processes.
但是当尝试通过jQuery表单发布此表单时，验证不会发生在表单值上。表单提交，但是这些值根本没有验证。
However when trying to post this form via jQuery forms, the validation doesn't take place on the form values. The form submits, but the values aren't validated at all.
如何通过jQuery Validation插件通过jQuery Form插件验证使用jQuery Form插件提交表单拨打 ajax ？
How can I submit the form using the jQuery Form plugin while being validated by the jQuery Validation plugin through a call to ajax?
推荐答案
最重要的规则的调用（add，options） ）调用 xVal.AttachValidator ）规则（添加，选项）（强调我的）：
The most important thing to look out for when putting all of this together is the little piece of documentation (which isn't really apparent in the documentation for xVal, which abstracts the call to rules("add", options) in the call to xVal.AttachValidator) for rules("add", options) (emphasis mine):
添加指定的规则并返回
第一个匹配的
元素的所有规则。 要求验证父
表单，即
$（form）。validate（）首先称为
。
当jQuery Form插件发挥作用，并且你想通过AJAX提交表单时，这一点尤其重要，因为你必须设置一个<$ c调用
This is especially important when the jQuery Form plugin comes into play, and you want to submit the form via AJAX, as you have to set up a submitHandler option in the call to validate(options), like so:
<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>
由于上面引用的关于调用规则的文件（添加，选项），对验证（选项）的调用必须在调用规则之前（添加 ，选项） 。
Because of the documentation quoted above regarding calls to rules("add", options), the call to validate(options) must come before the calls to rules("add", options).
如果没有，则忽略submitHandler，从不调用。
If they do not, then the submitHandler is ignored, never called.
最后，这意味着您将客户端代码放在一起时必须看起来像这样：
In the end, this means that your client side code has to look like this when putting it all together:
<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") %>
最后，所有这些都连接起来，最后要做的就是当服务器做什么时-side方法返回。
Finally, with all of this wired up, the last thing to do is what to do when the server-side method returns.
您希望从这些调用返回的JSON类似于标准化的viewmodel shell，其中包含特定于响应的内容。更加标准化的部分，在同类调用中公开您需要的信息，如下所示：
You'll want the JSON that's returned from these calls to be something like a standardized viewmodel shell where you have the response-specific content wrapped in a more standardized piece that exposes the information you need across homogeneous calls, something like this:
{
// 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）和可以直接传递给<的地图a href =http://docs.jquery.com/Plugins/Validation/Validator/showErrors#errors =nofollow> showErrors（errors） 方法如果字段有错误：
For the errors on the server, return the same as above, but with a location which has the URL which the user should be redirected to on success (or null if it was not successful) and a map which can be passed directly to the showErrors(errors) method if there are errors on the fields:
{
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 应该清楚：
Given that, the success field of the options parameter passed to ajaxSubmit should be clear:
// 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）。
All it does is check to see if the newLocation property is defined. If it is defined, then it redirects the current document to the location (which typically would be the url of the newly saved resource).
如果未定义，则它需要地图并将其传递给 showErrors 在通过调用 validate（options）返回的验证器上，设置使用通过调用 validate（options）指定的定位和样式的错误消息。
If it is not defined, then it takes the map and passes it to showErrors on the validator returned by a call to validate(options), setting the error messages using the positioning and style specified by the call to validate(options).
这篇关于如何将jQuery Validation插件与元数据，jQuery Forms和xVal一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
