{"id":1092,"date":"2015-08-03T12:28:14","date_gmt":"2015-08-03T12:28:14","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1092"},"modified":"2015-08-03T12:28:52","modified_gmt":"2015-08-03T12:28:52","slug":"angularjs-form-validating-form-server-side","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/angularjs-form-validating-form-server-side\/","title":{"rendered":"Ruby on Rails Tutorial AngularJS form, validating form server-side"},"content":{"rendered":"

(1)Rails validation<\/strong><\/p>\r\n\r\n

$ vi app\/models\/user.rb<\/p>\r\n\r\n

\r\nclass User < ActiveRecord::Base\r\n  validates :password, length: { minimum: 6 }\r\n  validates :name,  presence: true, length: { maximum: 20 }\r\n  VALID_EMAIL_REGEX = \/\\A[\\w+\\-.]+@[a-z\\d\\-.]+\\.[a-z]+\\z\/i\r\n  validates :email, presence: true, format: { with: VALID_EMAIL_REGEX },\r\n                    uniqueness: { case_sensitive: false }\r\nend<\/pre>\r\n\r\n
(2)AngularJS controller<\/strong><\/p>\r\n\r\n
1)underscore.js include<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/application.js<\/p>\r\n\r\n
\/\/= require underscore-min<\/p>\r\n\r\n
2)AngularJS controller "UsersNewCtrl"<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n
\r\nmyModule.controller("UsersNewCtrl", function($scope, userResource, $location, flashService) {\r\n.....\r\n  $scope.submit = function() {\r\n.......\r\n    function failure(response) {\r\n      _.each(response.data, function(errors, key) {\r\n        _.each(errors, function(e) {\r\n          $scope.userNewForm[key].$dirty = true;\r\n          $scope.userNewForm[key].$setValidity(e, false);\r\n        });\r\n      });\r\n    }\r\n    userResource.create($scope.user, success, failure);\r\n  };\r\n  $scope.errorMessage = function(name) {\r\n    var s = $scope.userNewForm[name].$error;\r\n    result = [];\r\n    _.each(s, function(key, value) {\r\n      result.push(name + " " + value);\r\n    });\r\n    return result.join(", ");\r\n  };\r\n});<\/pre>\r\n\r\n
(3)AngularJS template view<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/users\/new.html.erb<\/p>\r\n\r\n
\r\n<div ng-controller="UsersNewCtrl" class="row">\r\n<style>\r\n  form.ng-invalid.ng-dirty { background-color: lightpink; }\r\n  form.ng-valid.ng-dirty { background-color: lightgreen; }\r\n  form { padding: 10px;}\r\n<\/style>\r\n  <div class="col-md-6 col-md-offset-3">\r\n    <h1 class="text-center">Sign up<\/h1>\r\n    <form name="userNewForm" novalidate>\r\n      <div class="well">\r\n        <div class="form-group" ng-class="{'has-error': userNewForm.name.$invalid && userNewForm.name.$dirty}">\r\n          <label>Name<\/label>\r\n          <input name="name" class="form-control"\r\n            ng-model="user.name"\r\n            required\r\n            ng-maxlength="20" \/>\r\n          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.required">\r\n            Name can't be blank\r\n          <\/span>\r\n          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$error.maxlength">\r\n            Name is too long (maximum is 20 characters)\r\n          <\/span>\r\n          <span class="text-danger" ng-show="userNewForm.name.$dirty && userNewForm.name.$invalid">\r\n            {{errorMessage('name')}}\r\n          <\/span>\r\n        <\/div>\r\n        <div class="form-group" ng-class="{'has-error': userNewForm.email.$invalid && userNewForm.email.$dirty}">\r\n          <label>Email<\/label>\r\n          <input type="email" name="email" class="form-control"\r\n            ng-model="user.email"\r\n            required \/>\r\n          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.required">\r\n            Email can't be blank\r\n          <\/span>\r\n          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$error.email">\r\n            Email is invalid\r\n          <\/span>\r\n          <span class="text-danger" ng-show="userNewForm.email.$dirty && userNewForm.email.$invalid">\r\n            {{errorMessage('email')}}\r\n          <\/span>\r\n        <\/div>\r\n        <div class="form-group" ng-class="{'has-error': userNewForm.password.$invalid && userNewForm.password.$dirty}">\r\n          <label>Password<\/label>\r\n          <input type="password" name="password" class="form-control"\r\n            ng-model="user.password"\r\n            required\r\n            ng-minlength="6" \/>\r\n          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.required">\r\n            Password can't be blank\r\n          <\/span>\r\n          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$error.maxlength">\r\n            Password is too short (minimum is 6 characters)\r\n          <\/span>\r\n          <span class="text-danger" ng-show="userNewForm.password.$dirty && userNewForm.password.$invalid">\r\n            {{errorMessage('password')}}\r\n          <\/span>\r\n        <\/div>\r\n        <div class="form-group" ng-class="{'has-error': userNewForm.password_confirmation.$invalid && userNewForm.password_confirmation.$dirty}">\r\n          <label>Password_confirmation<\/label>\r\n            <input type="password" name="password_confirmation"\r\n              class="form-control"\r\n              ng-model="user.password_confirmation"\r\n              required\r\n              ng-minlength="6" \/>\r\n          <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$error.required">\r\n            Password_confirmation can't be blank\r\n          <\/span>\r\n          <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$error.maxlength">\r\n            Password_confirmation is too short (minimum is 6 characters)\r\n          <\/span>\r\n          <span class="text-danger" ng-show="userNewForm.password_confirmation.$dirty && userNewForm.password_confirmation.$invalid">\r\n            {{errorMessage('password_confirmation')}}\r\n          <\/span>\r\n        <\/div>\r\n        <button ng-click="submit()" class="btn btn-primary"\r\n                 ng-disabled="userNewForm.$invalid" >\r\n          Create my account\r\n        <\/button>\r\n        <button ng-click="resetError(userNewForm)" class="btn btn-primary">\r\n          Reset Error\r\n        <\/button>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div><\/pre><\/div>\r\n","protected":false},"excerpt":{"rendered":"
(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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,145,155],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1092"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1092"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1092\/revisions"}],"predecessor-version":[{"id":1093,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1092\/revisions\/1093"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1092"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}