3

Tengo la siguiente directiva, que conseguí en la web para usar jQuery Validator con 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 {};
        }
    };
});

Esta lo que hace es que pueda validar un formulario usando Jquery Validate.

Mi 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>

En mi controlador llamo de la siguiente forma

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

pero la linea del if(form.validate()) me devuelve form.validate is not a function. Si veo la directiva se tiene el form.validate pero no entiendo porque me llega que no es una función. Mas aya de todo mis manejo con directivas no es muy avanzado. No se que puedo hacer para form.validate se ejecute.

2
  • porque necesitas de jquery validation para implementar validaciones en angular? lo pregunto porque esto no seria necesario, angular implementa su propia forma de validar controles que es aun mejor Commented el 20 ene. 2016 a las 0:24
  • He cambiado el título de la pregunta para que sea mas fácil de encontrarla, me parece un tema interesante y con dos buenas respuestas
    – rsciriano
    Commented el 11 mar. 2016 a las 7:17

2 respuestas 2

3

No evaluaste hacer uso de las validaciones que impelmenta el propio angular.

Este cuenta con el $valid o $invalid, para conocer si el form esta correcto o no

AngularJS Form Validation

Es mas si lo unes a ngMessages puedes personalizar como mostrar los mensajes

AngularJS Form Validation with ngMessages

A donde apunto es que la tecnica que brinda angular es mejor que la que podrias obtener con validaciones de jquery

3
  • Inicialmente lo tenia solo con las validaciones e iba a colocar los messages, pero el cliente solicito usar jquery dataTable, creo que haré unas pruebas, pero igual no logro comprender porque form nunca es visto. Creo que según la documentación el no permite ningún parámetro from
    – Wilfredo
    Commented el 20 ene. 2016 a las 10:23
  • El tema es que form es un elemento del html, por lo tanto desde los controller o service no tiene acceso al mismo. Es mas si analzias las validaciones del propio angular en los articulos que sugiero, veras que el $valid o $error se genera desde la view, es porque estos tambien usan el form, pero desde el html. Quizas si le pasas desde el html la instancia del form al controller podrias acceder a este Commented el 20 ene. 2016 a las 10:57
  • + 1 Me quede con este enfoque, solo le coloque los ngMessages y listo. Gracias
    – Wilfredo
    Commented el 20 ene. 2016 a las 16:02
2

El problema esta en como usas ngSubmit; ya que esta espera una expresion:

<form ng-submit="expresion">

Como estas utilizando: ng-submit="register(order-form)" angular entiende esto como: order menos form.

Solución: no utilizes operadores en el nombre. Por Ejemplo cámbialo a: orderform

Ademas, el ejemplo que hay en la documentacion utiliza la propiedad name en lugar de id para el nombre del form, quedaria asi:

<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>
1
  • +1 aunque tienes toda la razón, no lo haré con esas validaciones, los problemas que me estaba dando eran mayores. Gracias por tu ayuda.
    – Wilfredo
    Commented el 20 ene. 2016 a las 16:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.