Parsley validation not working Angular js

Question

i am using parsely validation with angular js but its not working what i am doing wrong can any one correct or detect the mistake in my code. if i am submiting so its not working not showing me any error as parsely show , according to thier attributes. I also add parsely libraries and not getting any error related to it so what's going wrong.

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
          }
      };

Outing

Answer 1

Took me a little work and playing around with things, but I ended up creating a directive called parsleyValidateInput. Put that on every input you want to be validated with parsley.

coffeescript:

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);
      });
    }
  };
});

use:

<form parsley-validate>
   <div class='row' ng-repeat='book in books'>
   <input parsley-validate-input type='text' ng-model='books' required>
</form>

Lam

This works beautifully except for one thing – it doesn't integrate with ng-required, which makes it impossible to have dynamic validation. It also seems to have an underscore.js dependency, with _.uniqueId(). It would help if you could explain what your directive is doing. – America

Answer 2

There is an easiest way to do that, this is the directive I use:

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

Usage:

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

nb: novalidate="" is used to block the HTML5 validation.

Techy

Answer 3

Parsley requires that dynamically loaded forms be initialized by JavaScript. In this case, you’ll want to do that in loginController.js.

I haven’t been able to get this to work myself due to a maximum call stack size exceeded error somewhere in Parsley. I’ll be curious to see if you get the same error.

An alternative is to validate the model. You can add a $watch to LoginName and LoginPass, determine whether they’re blank, and set variables on the scope (e.g. LoginNameIsValid) which you could in turn use to set a class with ng-class. When someone clicks the submit button, all you have to do is check your validity flags.

Veneaux

Answer 4

I know this message is old but thought I would reply hoping it helps someone.

I ended up doing something similar to @yagudaev but made it a little more generic so you do not need parsley attribute on each element. Instead one needs it on the form element as an attribute. I also took into account if the form is dynamically loaded so parsley can still validate it. This is tested with Parsley 2.x and Angular 1.3.x and 1.4.x.

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

I should note that I ended up going down the route of using angulars validation with ngMessage but enhanced it's validation to allow reusing validation messages with values (ie. Value needs to be between X and Y. X and Y are inserted automatically) which Parsley is inherently much better at doing then even angular ngMessage and it's new form validation in 1.3+.

Croaker