0

Я использую рубин на рельсах и угловой.Проблема с проверкой JQuery с AngularJS

Я следую - https://github.com/jpkleemans/angular-validate

Я следующий

application.js

//= require jquery 
//= require app/jquery.validate.min.js 
//= require angular 
//= require app/angular-validate 
//= require angular-resource 
//= require ui-bootstrap 
//= require ui-bootstrap-tpls 
//= require app/assets 
//= require app/services 
//= require app/filters 
//= require app/directives 
// require app/showErrors.js 
//= require app/controllers 
//= require app/security 
//= require app/app 
//= require app/services/UserService.js 
//= require app/services/FlashService.js 
//= require app/cookie.js 

APP.JS

var app; 
app = angular.module('app', [ 
    'ui.bootstrap', 
    'security', 
    'app.services', 
    'app.controllers', 
    'app.filters', 
    'app.directives', 
    'ngCookies', 
    'ngValidate' 
    //'ui.bootstrap.showErrors' 
]); 
app.constant('config', 'http://localhost:3000/api/v1') 


app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { 

    $locationProvider.html5Mode(true); 
    $routeProvider. 

    when('/signup', { 
    controller: 'LoginCtrl', 
    templateUrl: ASSETS['signup'] 
    }). 
    when('/login', { 
    controller: 'LoginCtrl', 
    templateUrl: ASSETS['login'] 
    }). 
    when('/logout', { 
    controller: 'LoginCtrl',  
    }). 
    otherwise({ 
    redirectTo:'/' 
    }); 
}]); 

angular.module('app').run(['$rootScope', '$location', 'UserService', '$cookieStore', '$http', 'security', function($rootScope, $location, UserService, $cookieStore, $http, security) { 

    $rootScope.globals = $cookieStore.get('globals') || {}; 

    if ($rootScope.globals.currentUser) { 
    $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; 
    } 

    $rootScope.$on('$locationChangeStart', function (event, next, current) { 

    var restrictedPage = $.inArray($location.path(), ['/info', '/signup', '/login']) === -1; 
    var loggedIn = $rootScope.globals.currentUser; 

    if (restrictedPage && !loggedIn) { 
     $location.path('/login'); 
    } 
    }); 

}]); 

app.config(function($httpProvider) { 
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content'); 

    var interceptor = ['$rootScope', '$q', function(scope, $q) { 
    function success(response) { 
     return response 
    }; 

    function error(response) { 
     if (response.status == 401) { 
     var deferred = $q.defer(); 
     scope.$broadcast('event:unauthorized'); 
     return deferred.promise; 
     }; 
     return $q.reject(response); 
    }; 
    return function(promise) { 
     return promise.then(success, error); 
    }; 
    }]; 

    $httpProvider.responseInterceptors.push(interceptor); 
}); 

LoginCtril

window.LoginCtrl = ['$scope', '$http', '$location', 'UserService', 'FlashService', 'config', 'security', function($scope, $http, $location, UserService, FlashService, config, security) { 

    // Signup 
    $scope.signup = function(){  
     $scope.loginProcess = true; 
     UserService.Signup($scope.user, function(response){ 
      if (response.success){ 
      UserService.SetCredentials(response.access_token); 
       $location.path('/login') 
      }else{ 
      $scope.authError = response.errors 
      FlashService.Error(response.errors); 
      } 
     $scope.loginProcess = false; 
     }) 
    }; 

    $scope.validationOptions = { 
    rules: { 
     firstname: { 
      required: true, 
     }, 
    }, 
    messages: { 
     firstname: { 
      required: "This field is required.", 
     }, 
    } 
    } 


}]; 

и Это моя форма.

<div data-ng-controller="LoginCtrl"> 
{{validationOptions}} 

<div ng-class="{ 'alert': flash, 'alert-success': flash.type == 'success', 'alert-danger': flash.type == 'error' }" ng-if="flash" ng-bind="flash.message"></div> 

<form name ='signupForm' data-ng-submit="signupForm.$valid && signup()" novalidate ng-validate="validationOptions"> 

<div class="form-group"> 
    <label>First Name</label> 

    <input type="text" name="firstname" class="form-control" ng-model="user.firstname" required /> 

</div> 

    <button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button> 

</form> 

</div> 

Проверка JQuery не показывает, что неправильно с приведенным выше кодом, пожалуйста, помогите мне. Спасибо.

+0

детали - https://gist.github.com/dipak1112/5842ab7166ed8ba768710854e07ab2aa –

+1

Вы знаете, что угловое имеет встроенные проверки, а также дополнительный 'ngMessages'? Кажется, излишне использовать jQuery и добавить для него дополнительный плагин. – charlietfl

+0

Я новичок в угловой, но позвольте мне попытаться использовать ngMessage. –

ответ

0

UPDATE

Я нашел лучший способ без JQuery.

Я нашел этот ответ долго назад, но теперь я вспомнил, что обновлялся здесь через год. Формы будут доступны в объекте $ scope. Так что просто дайте имя форме и используйте ее. более

**HTML** 

<form id="userRegistration" name="registration" ng-submit="registerUser()" > 

**Controller** 

$scope.registerUser=function() 
    { 
     if ($scope.registration.$valid){ 
      alert("Submitting..."); 
     } 
    } 

**OLD Answer** 

Thanks to Dipak for the comment. 
I am adding the comment as answer here. 

angular.module('myApp').controller('RegisterController', function($scope,$http) { 
    page.setPage("Register","login-layout"); 
    $scope.user = {}; 
    $scope.registerUser=function() 
    { 
     if ($("#userRegistration").valid()){ 
      alert("Submitting..."); 
     } 
    } 
}); 
Смежные вопросы