1

単純に、この単純なフォームを検証するために JQuery 検証を使用しています 

<form id="getting-started-form">
<label>Name</label>
<input type="text" id="txt-name" name="name" />

<br />
<label>Email</label>
<input type="text" id="txt-email" name="email" />

<button type="submit">Validate</button>
</form>

このフォームが ng ビュー内に含まれていない場合、検証は正常に機能しますが、ng ルートを使用してこのテンプレートを取得すると、検証は同じフォームで機能しません。

これは私の単純な HTML ページです

<!DOCTYPE html>
<html data-ng-app="ngViewValidate">
<head>
<title></title>
</head>
<body>

<div data-ng-view="">
</div>

<br />
<a href="#/ValidationTmpl">Go to validation template </a>
</body>
<script src="../Scripts/angularjs.js"></script>
<script src="../Scripts/angular-route.js"></script>
<script src="../Scripts/jquery-2.0.2.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="JQueryValidateWithNgView.js"></script>
</html>

これは私のJavaスクリプトファイルです JqueryValidateWithNgView

var ngViewValidate = angular.module('ngViewValidate', ['ngRoute']);

ngViewValidate.config(function ($routeProvider , $locationProvider) {

$routeProvider.when('/ValidationTmpl',
    {
        templateUrl: '/WithAngular/ValidationTmpl.html'
    })
})

$('#getting-started-form').validate({

rules: {
    name: {
        required: true
    },
    email: {
        required: true
    }
},
submitHandler: function (form) {
    console.log('Valid');
},
invalidHandler: function (event, validator) {
    console.log('InValid');
}
})

問題は、回避策を使用してngビュー内のテンプレートでJQuery検証を使用できるか、または角度検証を使用する必要があるかです。

4

3 に答える 3

1

それをディレクティブに移動し、たとえばフォームに配置します。

HTML:

<form id="getting-started-form" j-validate>

JS:

ngViewValidate.directive('jValidate', function() {

  return {
    link: function(scope, element, attr) {

      element.validate({

        rules: {
          name: {
            required: true
          },
          email: {
            required: true
          }
        },
        submitHandler: function(form) {
          console.log('Valid');
        },
        invalidHandler: function(event, validator) {
          console.log('InValid');
        }
      });

      scope.$on('$destroy', function () {
        // Perform cleanup.
        // (Not familiar with the plugin so don't know what should to be done)
      });
    }
  }
});

デモ: http://plnkr.co/edit/cjQH7dl3vHGzgaA9OHOy?p=preview

ディレクティブに配置するロジックに応じて、たとえば、バインディングの前にフォームを変更するために追加の jQuery プラグインが必要な場合は、すぐ$timeoutに (少し簡略化して) アクションをブラウザー イベントの最後に配置できます。レンダリング エンジンの後のキュー:

ngViewValidate.directive('jValidate', function($timeout) {

  return {
    link: function(scope, element, attr) {

      $timeout(function () {

        element.validate({

          ...

        });
      });

      scope.$on('$destroy', function() {

        ...

      });
    }
  }
});

$evalAsyncまたは、DOM が Angular によって操作された後、たとえば他のディレクティブによってロジックを実行するために使用できますが、ブラウザーがそれをレンダリングする前に:

ngViewValidate.directive('jValidate', function() {

  return {
    link: function(scope, element, attr) {

      scope.$evalAsync(function () {

        element.validate({

          ...

        });
      });

      scope.$on('$destroy', function() {

        ...

      });
    }
  }
});
于 2014-05-17T06:29:27.980 に答える
0

tis を機能させる最も簡単な方法は、

   $scope.$on('$viewContentLoaded', function (event) {


            var currentForm = $('#frmCreateForm');
            currentForm.removeData("validator");
            currentForm.removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse(currentForm);
            //currForm.validate();
            var validator = currentForm.validate();  
});
于 2015-06-05T11:46:56.997 に答える