validate | Web Programming examples

(1)Rails controller, route

1)"Sessions" controller

1.generate "Sessions" controller

$ rails generate controller Sessions

2.create action

$ vi app/controllers/sessions_controller.rb

  def create
    user = User.find_by(email: session_params[:email].downcase)
    if user && user.authenticate(session_params[:password])
    else
      msg = {"password" => ["Invalid email/password combination"]}
      render json: msg, status: :unprocessable_entity
    end
  end
private
  def session_params
    params.permit(:email,:password)
  end

2)Rails route

$ vi config/routes.rb

match '/app/sessions', to: 'sessions#create', via: 'post'
match '/app/sessions', to: 'sessions#destroy', via: 'delete'

(2)AngularJS "sessionResource" service

$ vi app/assets/javascripts/mymodule.js.erb

myModule.factory("sessionResource", function($resource) {
  return $resource("/app/sessions",{},
    {
      'create':  { method: 'POST' },
      'destroy': { method: 'DELETE' }
    }
  );
});

(3)AngularJS route

$ vi app/assets/javascripts/mymodule.js.erb

.when("/signin", {
 templateUrl: "<%= asset_path('sessions/new.html.erb') %>"
 })

(4)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("SessionsNewCtrl", function($scope, sessionResource) {
  $scope.session = new sessionResource();
  $scope.submit = function() {
    function success(response) {
      console.log("test");
    }
    function failure(response) {
      _.each(response.data, function(errors, key) {
        _.each(errors, function(e) {
          $scope.sessionNewForm[key].$dirty = true;
          $scope.sessionNewForm[key].$setValidity(e, false);
        });
      });
    }
    sessionResource.create($scope.session, success, failure);
  };
  $scope.errorMessage = function(name) {
    var s = $scope.sessionNewForm[name].$error;
    result = [];
    _.each(s, function(key, value) {
      result.push(value);
    });
    return result.join(", ");
  };
  $scope.errorClass = function(name) {
    var s = $scope.sessionNewForm[name];
    return s.$invalid && s.$dirty ? "has-error" : "";
  };
});

(5)AngularJS template view

$ vi app/assets/templates/sessions/new.html.erb

<div ng-controller="SessionsNewCtrl" class="row">
  <div class="col-md-6 col-md-offset-3">
    <h1 class="text-center">Sign in</h1>
    <div class="well">
      <form name="sessionNewForm" ng-submit="submit()" novalidate>
        <div class="form-group">
          <label>Email</label>
          <input type="email" name="email" class="form-control"
            ng-model="session.email"
            required />
        </div>
        <div class="form-group" ng-class="errorClass('password')">
          <label>Password</label>
          <input type="password" name="password" class="form-control"
            ng-model="session.password" required />
          <span class="help-block" ng-show="sessionNewForm.password.$invalid && sessionNewForm.password.$dirty">
            {{errorMessage('password')}}
          </span>
        </div>
        <button type="submit" class="btn btn-large btn-primary">Sign in</button>
      </form>
      <p>New user?<a href="/users/new">Sign up now!</a></p>
    </div>
  </div>
</div>

(6)add a link to signin

$ vi app/views/layouts/_header.html.erb

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

Web Programming examples

Archives

Ruby on Rails Tutorial AngularJS form, validating form server-side