I have the following directive, which I got on the web to use jQuery Validator with Angularjs
app.directive('ngValidate', function () {
return {
require: 'form',
restrict: 'A',
scope: {
ngValidate: '='
},
link: function (scope, element, attrs, form) {
var validator = element.validate(scope.ngValidate);
form.validate = function (options) {
var oldSettings = validator.settings;
validator.settings = $.extend(true, {}, validator.settings, options);
var valid = validator.form();
validator.settings = oldSettings; // Reset to old settings
return valid;
};
form.numberOfInvalids = function () {
return validator.numberOfInvalids();
};
}
};
})
.provider('$validator', function () {
$.validator.setDefaults({
onsubmit: false // to prevent validating twice
});
return {
setDefaults: function (options) {
$.validator.setDefaults(options);
},
addMethod: function (name, method, message) {
$.validator.addMethod(name, method, message);
},
$get: function () {
return {};
}
};
});
What this does is that you can validate a form using Jquery Validate.
my html
<form id="order-form" class="smart-form" ng-submit="register(order-form)" ng-validate="validationOptions">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit" name="name" value="submitme">
</form>
In my controller I call as follows
$scope.register = function (form) {
if(form.validate()) {
// Form is valid!
alert('hallo')
}
}
but the line if(form.validate())
returns form.validate is not a function . If I see the directive, it has the form.validate but I don't understand why I get that it is not a function. Beyond all my management with directives is not very advanced. I don't know what I can do to make form.validate
it run.
You did not evaluate making use of the validations that angular itself implements.
This has the $valid or $invalid, to know if the form is correct or not
AngularJS Form Validation
It is more if you join it to ngMessages you can customize how to display the messages
AngularJS Form Validation with ngMessages
What I'm aiming at is that the technique provided by angular is better than what you could get with jquery validations.
The problem is how you use ngSubmit; since it expects an expression :
How are you using:
ng-submit="register(order-form)"
angular understands this as: order minus form.Solution: don't use operators in the name. For Example change it to: orderform
Also, the example in the documentation uses the property
name
instead ofid
for the name of the form, it would look like this: