0

我在 Rails 和 Angular 上使用 ruby​​。

我关注 - https://github.com/jpkelemans/angular-validate

我做以下

应用程序.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 );
});

登录控件

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 验证不显示上述代码有什么问题，请帮助我。谢谢你。

4

1 回答 1

0

更新

我找到了没有 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...");
       }
    }
});
于 2016-06-22T05:40:56.577 回答