{"id":1089,"date":"2015-08-03T06:54:29","date_gmt":"2015-08-03T06:54:29","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1089"},"modified":"2015-08-03T06:54:29","modified_gmt":"2015-08-03T06:54:29","slug":"angularjs-form-validation-error-messages","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/angularjs-form-validation-error-messages\/","title":{"rendered":"Ruby on Rails Tutorial AngularJS form validation, error messages"},"content":{"rendered":"

$ 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        <\/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        <\/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        <\/div>\r\n..............\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      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div><\/pre>\r\n\r\n
 <\/p>\r\n","protected":false},"excerpt":{"rendered":"
$ 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 […]<\/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":[82,153,154],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1089"}],"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=1089"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1089\/revisions"}],"predecessor-version":[{"id":1090,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1089\/revisions\/1090"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1089"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}