add validation messages returned from server in forms

module/schools/public/js/schools/staff.js

-(function () {
+(function (utils) {
     'use strict';
 
     var Staff,
@@ -87,13 +87,17 @@
             'click button.remove': 'removeTeacher',
         },
         initialize: function () {
+            var that = this;
             this.form = this.$el.find('form');
             this.url = this.form.data('url');
+            this.$el.on('hide.bs.modal', function () {
+                utils.formMessages.clear(that.form);
+                that.form[0].reset();
+                that.form.find('input[type="hidden"]').val('');
+            });
         },
         render: function (teacherId) {
             var teacherAttributes;
-            this.form[0].reset();
-            this.form.find('input[type="hidden"]').val('');
             if (!teacherId) {
                 this.$el.find('.modal-footer button.remove').addClass('hidden');
             } else {
@@ -105,7 +109,7 @@
                 var element = $(element),
                     name = element.attr('name');
                 if ('checkbox' === element.attr('type')) {
-                    element.prop('checked', parseInt(teacherAttributes[name], 10));
+                    element.prop('checked', utils.parseInt(teacherAttributes[name]));
                 } else {
                     element.val(teacherAttributes[name] || '');
                 }
@@ -125,17 +129,27 @@
             }, {});
             var that = this;
             evt.preventDefault();
-            $.post(this.url, data).
-                done(function(response){
-                    if (that.teacher) {
-                        that.teacher.set(response);
-                    } else{
-                        that.model.add(response);
-                    }
-                    that.hide();
-                }).fail(function (xhr, err) {
-                    alert(xhr.statusText);
-                });
+            $.ajax({
+                url: this.url,
+                type: 'post',
+                data: data
+            }).done(function(response){
+                if (that.teacher) {
+                    that.teacher.set(response);
+                } else{
+                    that.model.add(response);
+                }
+                that.hide();
+            }).fail(function (xhr, err) {
+                var messages;
+                if (422 === xhr.status) {
+                    messages = JSON.parse(xhr.responseText).messages || {};
+                    utils.formMessages.render(that.form, messages);
+                } else {
+                    alert('Προέκυψε κάποιο σφάλμα');
+                }
+                
+            });
         },
         removeTeacher: function () {
             var that = this;
@@ -156,4 +170,4 @@
     });
 
     new StaffView({ model: new Staff() });
-}());
+}(window.EDULABS.utils));

module/schools/src/InputFilter/Teacher.php

@@ -22,13 +22,11 @@ class Teacher
     {
         $id = new Input('id');
         $id->setRequired(false)
-            ->setBreakOnFailure(true)
             ->getValidatorChain()
             ->attach(new Validator\Digits());
 
         $name = new Input('name');
         $name->setRequired(true)
-            ->setBreakOnFailure(true)
             ->getFilterChain()
             ->attach(new Filter\StringTrim());
         $name->getValidatorChain()
@@ -37,7 +35,6 @@ class Teacher
 
         $surname = new Input('surname');
         $surname->setRequired(true)
-            ->setBreakOnFailure(true)
             ->getFilterChain()
             ->attach(new Filter\StringTrim());
         $surname->getValidatorChain()
@@ -46,22 +43,20 @@ class Teacher
 
         $email = new Input('email');
         $email->setRequired(true)
-            ->setBreakOnFailure(true)
             ->getValidatorChain()
             ->attach(new Validator\NotEmpty())
             ->attach(new Validator\EmailAddress());
 
         $telephone = new Input('telephone');
         $telephone->setRequired(true)
-            ->setBreakOnFailure(true)
-            ->getValidatorChain()
+            ->getFilterChain()
+            ->attach(new Filter\Digits());
+        $telephone->getValidatorChain()
             ->attach(new Validator\NotEmpty())
-            ->attach(new Validator\StringLength(['min' => 10]))
-            ->attach(new Validator\Digits());
+            ->attach(new Validator\StringLength(['min' => 10]));
 
         $branch_id = new Input('branch_id');
         $branch_id->setRequired(true)
-            ->setBreakOnFailure(true)
             ->getValidatorChain()
             ->attach(new Validator\NotEmpty())
             ->attach(new Validator\Digits());

module/schools/src/Middleware/InputFilterTeacher.php

@@ -29,7 +29,7 @@ class InputFilterTeacher
 
         if (!$result['is_valid']) {
             $res = $res->withStatus(422, 'validation error');
-            $res->withJson($result['messages']);
+            $res->withJson($result);
 
             return $res;
         }

public/js/utils.js

 (function () {
     'use strict';
-    
+
     window.EDULABS = window.EDULABS || {};
     window.EDULABS.utils = EDULABS.utils || {};
 
-    window.EDULABS.utils.parseInt = function(str) {
+    window.EDULABS.utils.parseInt = function (str) {
         return parseInt(str, 10);
     };
 
-    $(document).on('change', '.btn-file :file', function() {
+    window.EDULABS.utils.formMessages = {
+        render: function (form, messages) {
+            var renderMessages = function (element, messages) {
+                var key,
+                    ul;
+                element.parents('.form-group').addClass('has-error');
+                ul = $('<ul class="help-block has-error">');
+                for (key in messages) {
+                    if (messages.hasOwnProperty(key)) {
+                        ul.append($('<li>').text(messages[key]));
+                    }
+                }
+                element.after(ul);
+            };
+            var prop;
+            this.clear(form);
+            for (prop in messages) {
+                if (messages.hasOwnProperty(prop)) {
+                    renderMessages(form.find('[name="' + prop + '"]'), messages[prop]);
+                }
+            }
+        },
+        clear: function (form) {
+            form.find('.form-group').removeClass('has-error');
+            form.find('.help-block.has-error').remove();
+        }
+    }
+            
+            
+
+    $(document).on('change', '.btn-file :file', function () {
         var input = $(this),
-            numFiles = input.get(0).files ? input.get(0).files.length : 1,
-            label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
+                numFiles = input.get(0).files ? input.get(0).files.length : 1,
+                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
         input.trigger('fileselect', [numFiles, label]);
     });
 
-    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
+    $('.btn-file :file').on('fileselect', function (event, numFiles, label) {
         var input = $(this).parents('.input-group').find(':text'),
-            log = numFiles > 1 ? numFiles + ' files selected' : label;
-    
-        if( input.length ) {
+                log = numFiles > 1 ? numFiles + ' files selected' : label;
+
+        if (input.length) {
             input.val(log);
         }
     });
@@ -29,4 +59,4 @@
         $(this).parents('.input-group').find(':text').val('');
     });
 
-} ());
\ No newline at end of file
+}());
\ No newline at end of file