jQuery Validationプラグインとは何か知っています。jQuery Unobtrusive ValidationライブラリがMicrosoftによって作成され、ASP.NET MVCフレームワークに含まれていることを知っています。しかし、それが何であるかを説明する単一のオンライン情報源を見つけることができません。標準のjQuery検証ライブラリと「非破壊的」バージョンの違いは何ですか?
jQuery Validationプラグインとは何か知っています。jQuery Unobtrusive ValidationライブラリがMicrosoftによって作成され、ASP.NET MVCフレームワークに含まれていることを知っています。しかし、それが何であるかを説明する単一のオンライン情報源を見つけることができません。標準のjQuery検証ライブラリと「非破壊的」バージョンの違いは何ですか?
回答:
Brad Wilsonは、控えめな検証と控えめなajaxに関する素晴らしい記事をいくつか持っています。
また、このPluralsightビデオの「AJAXとJavaScript」のセクションでは、非常にうまく表示されています。
基本的に、それは単に汚染しないJavascriptの検証であるあなた自身の持つソースコードを検証コード。これはdata-
、HTML の属性を利用して行われます。
控えめな方法で:
jquery検証の例:
<input type="text" name="email" class="required">
<script>
$(function () {
$("form").validate();
});
</script>
jquery検証控えめな例:
<input type="text" name="email" data-val="true"
data-val-required="This field is required.">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul><li style="display:none"></li></ul>
</div>
明確にするために、jQuery Validation Unobtrusiveを使用したフォーム検証を示すより詳細な例を以下に示します。
どちらもjQueryで次のJavaScriptを使用します。
$("#commentForm").validate({
submitHandler: function(form) {
// some other code
// maybe disabling submit button
// then:
alert("This is a valid form!");
// form.submit();
}
});
2つのプラグインの主な違いは、各アプローチで使用される属性です。
jQuery検証
以下の属性を使用するだけです。
これがフォームです...
<form id="commentForm">
<label for="form-name">Name (required, at least 2 characters)</label>
<input id="form-name" type="text" name="form-name" class="form-control" minlength="2" required>
<input type="submit" value="Submit">
</form>
邪魔にならないjQuery検証
次のデータ属性が必要です。
これがフォームです...
<form id="commentForm">
<label for="form-x-name">Name (required, at least 2 characters)</label>
<input id="form-x-name" type="text" name="name" minlength="2" class="form-control" data-msg-required="Name is required." data-rule-required="true">
<input type="submit" value="Submit">
</form>
これらの例のいずれかに基づいて、必要なフォームフィールドが入力され、追加の属性基準を満たしている場合、すべてのフォームフィールドが検証されたことを通知するメッセージがポップアップ表示されます。それ以外の場合は、問題のあるフォームフィールドの近くにエラーを示すテキストが表示されます。
参照:-jQuery検証:https : //jqueryvalidation.org/documentation/