Angularjs

About demo : Angularjs Ocelotds and Validation JSR303...

This is a really simple example about validation form, directly from Java side.

This demo use angularjs.
With Ocelot your front end application communicate elegantly with your java back-end

Hover the mouse  highlighted code  and get infos about it

Enter text , constraint : 3 to 20 chars
{{vc.name}}.{{vc.prop}} {{vc.message}}

Hover the mouse  highlighted code  and get infos about it

@DataService(resolver = Constants.Resolver.CDI)
public class UserServices {
   public void saveUser(@Valid User user) {
		
   }
}				

Hover the mouse  highlighted code  and get infos about it

public class User {
   @NotNull
   @Pattern(regexp = "\\w+")
   @Size(min = 3, max=20)
   String name = null;

   public String getName() {
      return name;
   }

   public void setName(String name) {
      this.name = name;
   }
}					

Hover the mouse  highlighted code  and get infos about it

angular.module('validationApp', []).controller('ValidationController', ['$scope', function ($scope) {
   var inst = this;
   inst.user = {"name":""};
   inst.validationConstraints = [];
   inst.saveUser = function () {
      console.log("saveUSer");
      userServices.saveUser(inst.user)
      .then(function () {
         console.log("saveUSer ok");
         inst.validationConstraints = [];
         $scope.$apply();
      })
      .catch(onFault)
      .constraint(function (violations) {
         console.log(violations);
         inst.validationConstraints = violations;
         $scope.$apply();
      });
   };
   var onFault = function (fault) {
      alert(fault.message + "\n" + fault.classname + "\n" + fault.stacktrace.join('\n'));
   };
}]);			

Hover the mouse  highlighted code  and get infos about it

<html>
   <head>
      <script src="ocelot/services.js" type="text/javascript"></script>
      <script src="ocelot/core.min.js" type="text/javascript"></script>
   </head>
   <body>
      <div ng-controller="ValidationController as validCtrl">
         <form class="form-inline" ng-submit="todoList.addTodo()">
            <input class="form-control" type="text" ng-model="validCtrl.user.name" placeholder="enter name here">
            <input class="btn btn-primary" type="button" value="Save" ng-click="validCtrl.saveUser()">
         </form>
         <div ng-repeat="vc in validCtrl.validationConstraints">{{vc.name}}.{{vc.prop}} {{vc.message}}</div>
      </div>
   </body>
</html>