(1)Rails validation
$ vi app/models/user.rb
class User < ActiveRecord::Base validates :password, length: { minimum: 6 } validates :name, presence: true, length: { maximum: 20 } VALID_EMAIL_REGEX = /\A[\w+\-.]+@[a-z\d\-.]+\.[a-z]+\z/i validates :email, presence: true, format: { with: VALID_EMAIL_REGEX }, uniqueness: { case_sensitive: false } end
(2)AngularJS controller
1)underscore.js include
$ vi app/assets/javascripts/application.js
//= require underscore-min
2)AngularJS controller "UsersNewCtrl"
$ vi app/assets/javascripts/mymodule.js.erb
myModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService) { ..... $scope.submit = function() { ....... function failure(response) { _.each(response.data, function(errors, key) { _.each(errors, function(e) { $scope.userNewForm[key].$dirty = true; $scope.userNewForm[key].$setValidity(e, false); }); }); } userResource.create($scope.user, success, failure); }; $scope.errorMessage = function(name) { var s = $scope.userNewForm[name].$error; result = []; _.each(s, function(key, value) { result.push(name + " " + value); }); return result.join(", "); }; });
(3)AngularJS template view
$ vi app/assets/templates/users/new.html.erb
<div ng-controller="UsersNewCtrl" class="row"> <style> form.ng-invalid.ng-dirty { background-color: lightpink; } form.ng-valid.ng-dirty { background-color: lightgreen; } form { padding: 10px;} </style> <div class="col-md-6 col-md-offset-3"> <h1 class="text-center">Sign up</h1> <form name="userNewForm" novalidate> <div class="well"> <div class="form-group" ng-class="{'has-error': userNewForm.name.$invalid && userNewForm.name.$dirty}"> <label>Name</label> <input name="name" class="form-control" ng-model="user.name" required ng-maxlength="20" /> <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.required"> Name can't be blank </span> <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.maxlength"> Name is too long (maximum is 20 characters) </span> <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$invalid"> {{errorMessage('name')}} </span> </div> <div class="form-group" ng-class="{'has-error': userNewForm.email.$invalid && userNewForm.email.$dirty}"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email" required /> <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.required"> Email can't be blank </span> <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.email"> Email is invalid </span> <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$invalid"> {{errorMessage('email')}} </span> </div> <div class="form-group" ng-class="{'has-error': userNewForm.password.$invalid && userNewForm.password.$dirty}"> <label>Password</label> <input type="password" name="password" class="form-control" ng-model="user.password" required ng-minlength="6" /> <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.required"> Password can't be blank </span> <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.maxlength"> Password is too short (minimum is 6 characters) </span> <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$invalid"> {{errorMessage('password')}} </span> </div> <div class="form-group" ng-class="{'has-error': userNewForm.password_confirmation.$invalid && userNewForm.password_confirmation.$dirty}"> <label>Password_confirmation</label> <input type="password" name="password_confirmation" class="form-control" ng-model="user.password_confirmation" required ng-minlength="6" /> <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$error.required"> Password_confirmation can't be blank </span> <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$error.maxlength"> Password_confirmation is too short (minimum is 6 characters) </span> <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$invalid"> {{errorMessage('password_confirmation')}} </span> </div> <button ng-click="submit()" class="btn btn-primary" ng-disabled="userNewForm.$invalid" > Create my account </button> <button ng-click="resetError(userNewForm)" class="btn btn-primary"> Reset Error </button> </div> </form> </div> </div>