angular-validate: b.validate is not a function

vimalu commented 9 years ago

Hello,

I have added both script in page but I got "b.validate is not a function" error from angular-validate.min.js. I have added below scripts to page:

1) jquery.validate.min.js 2) angular-validate.min.js

jpkleemans commented 9 years ago

Hi,

Thanks for your post.

That error means that jquery.validate.min.js is not properly loaded. Please make sure that the file exists and is being loaded.

You can check if jquery.validate.min.js is loaded correctly by pasting the following snippet into your html file:

<form id="form">
    <p>
        <label for="name">Name (required, at least 2 characters)</label>
        <input id="name" name="name" minlength="2" type="text" required>
    </p>
    <p>
        <input type="submit" value="Submit">
    </p>
</form>

<script>
    $("#form").validate();
</script>

If the above snippet validates correctly, but you still got the error when using my module. Please report back to me.

Thanks!

vimalu commented 9 years ago

I have tried your code and I am not getting error with it. jquery.validate.min.js is loaded correctly. I am getting problem when I assign scope "validationOptions" to ng-validate. In your angular-validate github landing page example (https://github.com/jpkleemans/angular-validate) , "validationOptions" is array so when I bind scope "validationOptions" to ng-validate then "angular-validate.min.js" throw error "b.validate is not a function".

jpkleemans commented 9 years ago

Hi,

b.validate is not bound to the input of ng-validate, so whatever your input is, you will still get the same error. Also in my example, validationOptions is not an array, but an object.

This works for me, can you try this? Of course, you'll have to change the paths to the scripts.

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="bower_components/jpkleemans-angular-validate/dist/angular-validate.min.js"></script>

    <script>
        var app = angular.module('app', ['ngValidate']);

        app.controller('TestController', function ($scope) {
            $scope.validationOptions = {
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    }
                },
                messages: {
                    email: {
                        required: "We need your email address to contact you",
                        email: "Your email address must be in the format of name@domain.com"
                    },
                    password: {
                        required: "You must enter a password",
                        minlength: "Your password must have a minimum length of 6 characters"
                    }
                }
            };

            $scope.register = function () {
                if ($scope.registerform.validate()) {
                    alert('valid!');
                }
            }
        });
    </script>
</head>
<body ng-app="app" ng-controller="TestController">

<form name="registerform" ng-validate="validationOptions">
    <input type="email" name="email">
    <input type="password" name="password">
</form>

<button ng-click="register()">validate</button>

</body>
</html>

Thanks!

amitpatil321 commented 9 years ago

First of all thanks a lot for this nice angular addon, Much appreciated. Well, I have one answer and one question. I am using your library with angular js and ionic. Answer : Same like @vimalu i was also getting same error. Then i observer your code and found that jquery.min.js has been loaded before angularjs, In my case it was ionic.bundle.js, I moved jquery.min.js before i load ionic bundle and that error vanished. Problem: Now when i click on submit button i get this error $scope.regform is undefined. My code looks like this

 // Register form validation rules
  $scope.validationOptions = {
      rules: {
          fname: {
              required: true
          }
      }
  }

  $scope.reg_submit = function () {
      if($scope.regform.validate()) {
          alert("is valid");
      }else{
        alert("not valid");
      }
  }

And reg form code is

<form name="regform" ng-validate="regvalidationOptions">
    <label class="item item-input item-floating-label"> 
        <span class="input-label">First Name</span> 
        <input type="text" name="fname" placeholder="First Name"> 
    </label> 
    <button class="button button-block button-calm ink" type="button" ng-click="reg_submit()"> Submit </button>
</form>

jpkleemans commented 9 years ago

Hi,

Thanks for your post.

It is difficult for me to find a solution, because there may be many causes. I also think the error is not related to this plugin, but to Angular itself (see https://docs.angularjs.org/guide/forms).

Maybe this thread can help: http://forum.ionicframework.com/t/cant-access-form-on-scope/679/3

jpkleemans / angular-validate

angular-validate: b.validate is not a function #1