5

私はAngular jsでparselyバリデーションを使用していますが、私が間違っていることがうまくいかないため、コードの間違いを修正または検出できます。私が送信している場合、その属性に従って、 parsely show としてエラーが表示されずに機能しません。また、parsely ライブラリを追加しましたが、それに関連するエラーが発生しないので、何が問題なのですか。

LoginView.html

<form class="form-horizontal" ng-submit='login()' data-validate="parsley">
                <div class="modal-header">
                    <h3>Login</h3>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="login-Name" class="col-lg-3 form-label">User Name:</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="login-Name" ng-model="LoginName" name="login-Name" placeholder="User Name" data-type="alphanum" data-required="true" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="login-Password" class="col-lg-3 form-label">Password:</label>
                        <div class="col-lg-8">
                            <input type="password" class="form-control" id="login-Password" ng-model="LoginPass" name="login-Password" placeholder="Password" data-type="alphanum" data-required="true" data-minlength="6" data-minlength="6" data-maxlength="20"/>
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="icon-user icon-white"></i> Login
                    </button>
                </div>

            </form>

loginController.js

$scope.login = function() {

          var user = {
              "username" : $scope.LoginName,
              "password" : $scope.LoginPass
          }
      };
4

4 に答える 4

6

ちょっと手間取っていろいろいじってみましたが、最終的には というディレクティブを作成しましたparsleyValidateInput。パセリで検証したいすべての入力にそれを入れてください。

コーヒースクリプト:

angular.module('app').directive 'parsleyValidateInput', ($timeout) ->
  link: (scope, element, attrs) ->
    element.on 'remove', ->
      element.closest('form').parsley('removeItem', "##{attrs.id}")

    $timeout ->
      element.attr('id', "input_#{_.uniqueId()}") unless element.attr('id')
      element.closest('form').parsley('addItem', "##{attrs.id}")

JavaScript:

angular.module('app').directive('parsleyValidateInput', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      element.on('remove', function() {
        return element.closest('form').parsley('removeItem', "#" + attrs.id);
      });
      return $timeout(function() {
        if (!attrs.id) {
          attrs.id = "input_" + (_.uniqueId());
          element.attr('id', attrs.id);
        }
        return element.closest('form').parsley('addItem', "#" + attrs.id);
      });
    }
  };
});

使用する：

<form parsley-validate>
   <div class='row' ng-repeat='book in books'>
   <input parsley-validate-input type='text' ng-model='books' required>
</form>
于 2014-02-05T03:25:53.913 に答える
3

これを行う最も簡単な方法があります。これは私が使用するディレクティブです。

angular.module('app').directive('validateForm', function() {
  return {
    restrict: 'A',
    controller: function($scope, $element) {
      var $elem = $($element);
      if($.fn.parsley)
        $elem.parsley();
    }
  };
});

使用法：

<form class="form-horizontal" ng-submit="login()" validate-form=""  novalidate="">

nb: novalidate=""HTML5 検証をブロックするために使用されます。

于 2015-05-29T12:08:19.230 に答える
0

このメッセージが古いことは承知していますが、誰かの役に立てば幸いです。

最終的に @yagudaev に似たようなことをしましたが、もう少し一般的なものにしたので、各要素に parsley 属性は必要ありません。代わりに、フォーム要素で属性として必要です。フォームが動的に読み込まれるかどうかも考慮に入れたため、パセリは引き続きフォームを検証できます。これは、Parsley 2.x と Angular 1.3.x および 1.4.x でテストされています。

http://ryanalberts.com/797/parsley-validation-with-angularjs/

ngMessage で angulars 検証を使用するルートをたどったことに注意する必要がありますが、検証メッセージを値で再利用できるように検証を強化しました (つまり、値は X と Y の間にある必要があります。X と Y は自動的に挿入されます)。角度のある ngMessage よりも本質的にはるかに優れており、1.3 以降の新しいフォーム検証です。

于 2015-01-22T15:12:29.360 に答える