web-dev-qa-db-ja.com

jQuery Unobtrusive Validationとは何ですか？

JQuery Validationプラグインが何であるかを知っています。 jQuery Unobtrusive ValidationライブラリはMicrosoftによって作成され、ASP.NET MVCフレームワークに含まれています。しかし、私はそれが何であるかを説明する単一のオンラインソースを見つけることができません。標準のjQuery Validationライブラリと「邪魔にならない」バージョンの違いは何ですか？

javascriptjqueryasp.netasp.net-mvcvalidation
135
user1438940

Brad Wilsonには、 非干渉的検証 および 非干渉的ajax に関するすばらしい記事があります。
これも非常にうまく示されています Pluralsight video 「AJAX and JavaScript」のセクション。

基本的に、独自のvalidationコードでyourソースコードを汚染しないのは、単にJavascript検証です。これは、HTMLのdata-属性を利用することで行われます。

118
bertl

控えめな方法で：

  • Validate（）メソッドを呼び出す必要はありません。
  • データ属性（data-val、data-val-requiredなど）を使用して要件を指定します。

Jquery Validate Example：

<input type="text" name="email" class="required">
<script>
        $(function () {
            $("form").validate();
        });
</script>

Jquery Validate Unobtrusive Example：

<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>
98
James Lawruk

説明のために、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 Validation

次の属性を使用するだけです：

  • 必要な場合は必須セット
  • 適切なフォーマット（メールなど）のタイプを設定します
  • サイズ（最小長など）などの他の属性を設定します

こちらがフォームです...

<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 Validation Unobtrusive

次のデータ属性が必要です。

  • data-msg-required = "これは必須です。"
  • data-rule-required = "true/false"

こちらがフォームです...

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

17
Richard Nalezynski

jQuery Validation Unobtrusive Nativeは、ASP.Net MVC HTMLヘルパー拡張機能のコレクションです。これらは、HTML 5データ属性によって駆動される検証に対するjQuery Validationのネイティブサポートを利用します。 Microsoftは、MVC 3とともにjquery.validate.unobtrusive.jsを出荷しました。jQueryValidationとHTML 5データ属性の組み合わせを使用して、データモデルの検証をクライアント側に適用する方法を提供しました（これは「邪魔にならない」部分です）。

6
bimal