Problems integrating jQuery Validator with AngularJs

Question

Problems integrating jQuery Validator with AngularJs

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

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 in the following way

  $scope.register = function (form) {
    if(form.validate()) {
        // Form is valid!
        alert('hallo')
    }
  }

but the line of if(form.validate()) returns form.validate is not a function . If I see the directive you have the form.validate but I do not understand why I get it that it is not a function. More than all my management with directives is not very advanced. I do not know what I can do for form.validate to run.

javascript jquery angularjs angular-directivas

asked by Wilfredo 20.01.2016 в 01:10

source

2 answers

2

The problem is in how you use ngSubmit; since it is waiting for a expression :

<form ng-submit="expresion">

How are you using:% co_of angular% understands this as: order less form.

Solution: do not use operators in the name. For example, change it to: orderform

Additionally, the example in the documentation uses the ng-submit="register(order-form)" property instead of name for the name of the form, it would look like this:

<form name="orderform" class="smart-form" ng-submit="register(orderform)" ng-validate="validationOptions">
    <input type="email" name="email">
    <input type="password" name="password">
    <input type="submit" name="name" value="submitme">
</form>

answered by 20.01.2016 в 13:13

Only shows undefined the values captured in the inputs Subtract hours from two columns datetime sql server

score 3 · Accepted Answer

You did not evaluate using the validations that the angular itself impels.

This account with $ valid or $ invalid, to know if the form is correct or not

AngularJS Form Validation

It's more if you join it to ngMessages you can customize how to show the messages

AngularJS Form Validation with ngMessages

Where I point is that the technique that provides angular is better than what you could get with jquery validations