メタデータ、jQueryフォーム、xvalを使用したjQuery検証プラグインを一緒に使用する方法は？
https://stackoverflow.com/questions/1996125
-
22-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私はそれを使用していくつかの開発を行ってきました xval .NETのフレームワークは、サーバー側のモデルの検証ルールの一部をリンクします。 jQuery検証プラグイン 一緒に jQueryフォームプラグイン フォームを送信するため。
しかし、私はそれらをすべて一緒にリンクするのに問題があります。
私は次のことを達成しようとしています：
呼び出して定義されたルールを使用して、クライアントが基本的な検証を実行できるようにします
rules("add", options")jQuery検証用のプラグイン（これは、XVALがモデルのサーバー側で定義されたルールを取得するために使用するものです）。クライアントの検証が成功した場合、サーバーに電話をかけて、フォームデータを実行するフォームデータを再度入力します（クライアントで検証されたアイテムと、クライアントで実行できない他の検証）。
サーバーに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フォームプラグインを使用してフォームを送信するにはどうすればよいですか？ ajax?
解決
最も重要な これらすべてをまとめるときに注意するべきことは、小さなドキュメントです（これはXvalのドキュメントでは実際には明らかではありません。 rules("add", options) 呼び出しで xVal.AttachValidator） 為に rules("add", options) （私の強調）：
指定されたルールを追加し、最初の一致した要素のすべてのルールを返します。 親フォームが検証されること、つまり$（ "form"）。validate（）が最初に呼び出されます。
これは、jQueryフォームプラグインが作用し、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).
そうでない場合、副中隊は無視され、決して呼ばれません。
最終的に、これは、クライアントサイドコードがすべてをまとめるときにこのように見える必要があることを意味します。
<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が、均一な通話で必要な情報を公開するより標準化されたピースに包まれた標準化されたViewModelシェルのようなものであることを望みます。
{
// 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
}
サーバーのエラーについては、上記と同じように返しますが、ユーザーが成功する（または成功していない場合はnull）にリダイレクトされるURLがある場所と、直接渡すことができるマップがあります。 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 のフィールド options パラメーター に渡された 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になります）。
定義されていない場合、マップを取り、に渡します showErrors 通話によって返されたバリデーターについて validate(options), 、通話によって指定されたポジショニングとスタイルを使用してエラーメッセージを設定します validate(options).
