From e505f2bd3239b3e982e704da9b2073cc73820779 Mon Sep 17 00:00:00 2001
From: alext <alextselegidis@gmail.com>
Date: Tue, 14 Nov 2017 13:52:59 +0100
Subject: [PATCH] Used bootstrap form validation helpers.

---
 src/application/views/backend/calendar.php    |  4 +--
 src/application/views/backend/customers.php   | 16 +++++-----
 .../js/backend_calendar_appointments_modal.js |  9 +++---
 ...backend_calendar_unavailabilities_modal.js |  8 +++--
 src/assets/js/backend_categories_helper.js    | 12 +++----
 src/assets/js/backend_customers_helper.js     | 28 ++++++++++-------
 src/assets/js/backend_services_helper.js      | 10 +++---
 src/assets/js/backend_settings.js             |  4 +--
 src/assets/js/backend_settings_system.js      | 10 +++---
 src/assets/js/backend_settings_user.js        | 11 +++----
 src/assets/js/backend_users.js                |  4 +--
 src/assets/js/backend_users_admins.js         | 29 ++++++++---------
 src/assets/js/backend_users_providers.js      | 29 ++++++++---------
 src/assets/js/backend_users_secretaries.js    | 31 +++++++++----------
 src/assets/js/frontend_book.js                |  4 +--
 src/assets/js/frontend_book_api.js            |  6 ++--
 src/assets/js/installation.js                 | 16 +++++-----
 17 files changed, 113 insertions(+), 118 deletions(-)

diff --git a/src/application/views/backend/calendar.php b/src/application/views/backend/calendar.php
index 053c86fb..261700bf 100644
--- a/src/application/views/backend/calendar.php
+++ b/src/application/views/backend/calendar.php
@@ -177,12 +177,12 @@
                             <div class="col-xs-12 col-sm-6">
                                 <div class="form-group">
                                     <label for="start-datetime" class="control-label"><?= lang('start_date_time') ?></label>
-                                    <input id="start-datetime" class="form-control">
+                                    <input id="start-datetime" class="required form-control">
                                 </div>
 
                                 <div class="form-group">
                                     <label for="end-datetime" class="control-label"><?= lang('end_date_time') ?></label>
-                                    <input id="end-datetime" class="form-control">
+                                    <input id="end-datetime" class="required form-control">
                                 </div>
                             </div>
                         </div>
diff --git a/src/application/views/backend/customers.php b/src/application/views/backend/customers.php
index 77389684..8c2d5eda 100644
--- a/src/application/views/backend/customers.php
+++ b/src/application/views/backend/customers.php
@@ -92,42 +92,42 @@
                     <div id="form-message" class="alert" style="display:none;"></div>
 
                     <div class="form-group">
-                        <label for="first-name"><?= lang('first_name') ?> *</label>
+                        <label class="control-label" for="first-name"><?= lang('first_name') ?> *</label>
                         <input id="first-name" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label for="last-name"><?= lang('last_name') ?> *</label>
+                        <label class="control-label" for="last-name"><?= lang('last_name') ?> *</label>
                         <input id="last-name" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label for="email"><?= lang('email') ?> *</label>
+                        <label class="control-label" for="email"><?= lang('email') ?> *</label>
                         <input id="email" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label for="phone-number"><?= lang('phone_number') ?> *</label>
+                        <label class="control-label" for="phone-number"><?= lang('phone_number') ?> *</label>
                         <input id="phone-number" class="form-control required">
                     </div>
 
                     <div class="form-group">
-                        <label for="address"><?= lang('address') ?></label>
+                        <label class="control-label" for="address"><?= lang('address') ?></label>
                         <input id="address" class="form-control">
                     </div>
 
                     <div class="form-group">
-                        <label for="city"><?= lang('city') ?></label>
+                        <label class="control-label" for="city"><?= lang('city') ?></label>
                         <input id="city" class="form-control">
                     </div>
 
                     <div class="form-group">
-                        <label for="zip-code"><?= lang('zip_code') ?></label>
+                        <label class="control-label" for="zip-code"><?= lang('zip_code') ?></label>
                         <input id="zip-code" class="form-control">
                     </div>
 
                     <div class="form-group">
-                        <label for="notes"><?= lang('notes') ?></label>
+                        <label class="control-label" for="notes"><?= lang('notes') ?></label>
                         <textarea id="notes" rows="4" class="form-control"></textarea>
                     </div>
 
diff --git a/src/assets/js/backend_calendar_appointments_modal.js b/src/assets/js/backend_calendar_appointments_modal.js
index f6cca2ec..b5b0d363 100644
--- a/src/assets/js/backend_calendar_appointments_modal.js
+++ b/src/assets/js/backend_calendar_appointments_modal.js
@@ -458,7 +458,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
         var $dialog = $('#manage-appointment');
 
         // Reset previous validation css formatting.
-        $dialog.find('.form-group').removeClass('has-error');
+        $dialog.find('.has-error').removeClass('has-error');
         $dialog.find('.modal-message').addClass('hidden');
 
         try {
@@ -467,7 +467,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
 
             $dialog.find('.required').each(function() {
                 if ($(this).val() == '' || $(this).val() == null) {
-                    $(this).parents('.form-group').addClass('has-error');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequiredField = true;
                 }
             });
@@ -478,7 +478,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
 
             // Check email address.
             if (!GeneralFunctions.validateEmail($dialog.find('#email').val())) {
-                $dialog.find('#email').parents('.form-group').eq(1).addClass('has-error');
+                $dialog.find('#email').closest('.form-group').addClass('has-error');
                 throw EALang.invalid_email;
             }
 
@@ -486,8 +486,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
             var start = $('#start-datetime').datetimepicker('getDate');
             var end = $('#end-datetime').datetimepicker('getDate');
             if (start > end) {
-                $dialog.find('#start-datetime').parents('.form-group').addClass('has-error');
-                $dialog.find('#end-datetime').parents('.form-group').addClass('has-error');
+                $dialog.find('#start-datetime, #end-datetime').closest('.form-group').addClass('has-error');
                 throw EALang.start_date_before_end_error;
             }
 
diff --git a/src/assets/js/backend_calendar_unavailabilities_modal.js b/src/assets/js/backend_calendar_unavailabilities_modal.js
index 5b15264c..115e36dd 100644
--- a/src/assets/js/backend_calendar_unavailabilities_modal.js
+++ b/src/assets/js/backend_calendar_unavailabilities_modal.js
@@ -30,6 +30,7 @@ window.BackendCalendarUnavailabilitiesModal = window.BackendCalendarUnavailabili
          */
         $('#manage-unavailable #save-unavailable').click(function() {
             var $dialog = $('#manage-unavailable');
+            $dialog.find('.has-error').removeClass('has-error');
             var start = $dialog.find('#unavailable-start').datetimepicker('getDate');
             var end = Date.parse($dialog.find('#unavailable-end').datetimepicker('getDate'));
 
@@ -39,6 +40,8 @@ window.BackendCalendarUnavailabilitiesModal = window.BackendCalendarUnavailabili
                     .text(EALang.start_date_before_end_error)
                     .addClass('alert-danger')
                     .removeClass('hidden');
+
+                $dialog.find('#unavailable-start, #unavailable-end').closest('.form-group').addClass('has-error');
                 return;
             }
 
@@ -136,8 +139,9 @@ window.BackendCalendarUnavailabilitiesModal = window.BackendCalendarUnavailabili
             }
 
             if ($('.calendar-view').length === 0) {
-                $dialog.find('#unavailable-provider').val($('#select-filter-item').val())
-                    .parents('.form-group')
+                $dialog.find('#unavailable-provider')
+                    .val($('#select-filter-item').val())
+                    .closest('.form-group')
                     .hide();
             }
 
diff --git a/src/assets/js/backend_categories_helper.js b/src/assets/js/backend_categories_helper.js
index b2cea091..d105f737 100644
--- a/src/assets/js/backend_categories_helper.js
+++ b/src/assets/js/backend_categories_helper.js
@@ -140,7 +140,7 @@
                 category.id = $('#category-id').val();
             }
 
-            if (!instance.validate(category)) {
+            if (!instance.validate()) {
                 return;
             }
 
@@ -263,17 +263,17 @@
     /**
      * Validate category data before save (insert or update).
      *
-     * @param {Object} category Contains the category data.
+     * @return {Boolean} Returns the validation result.
      */
-    CategoriesHelper.prototype.validate = function(category) {
-        $('#categories .record-details').find('input, textarea').css('border', '');
+    CategoriesHelper.prototype.validate = function() {
+        $('#categories .has-error').removeClass('has-error');
 
         try {
             var missingRequired = false;
 
             $('#categories .required').each(function() {
                 if ($(this).val() === '' || $(this).val() === undefined) {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
@@ -283,7 +283,7 @@
             }
 
             return true;
-        } catch(exc) {
+        } catch(message) {
             return false;
         }
     };
diff --git a/src/assets/js/backend_customers_helper.js b/src/assets/js/backend_customers_helper.js
index 2287b6f1..f7e18c90 100644
--- a/src/assets/js/backend_customers_helper.js
+++ b/src/assets/js/backend_customers_helper.js
@@ -158,7 +158,9 @@
                 customer.id = $('#customer-id').val();
             }
 
-            if (!instance.validate(customer)) return;
+            if (!instance.validate()) {
+                return;
+            }
 
             instance.save(customer);
         });
@@ -238,12 +240,12 @@
 
     /**
      * Validate customer data before save (insert or update).
-     *
-     * @param {Object} customer Contains the customer data.
      */
-    CustomersHelper.prototype.validate = function(customer) {
-        $('#form-message').hide();
-        $('.required').css('border', '');
+    CustomersHelper.prototype.validate = function() {
+        $('#form-message')
+            .removeClass('alert-danger')
+            .hide();
+        $('.has-error').removeClass('has-error');
 
         try {
             // Validate required fields.
@@ -251,7 +253,7 @@
 
             $('.required').each(function() {
                 if ($(this).val() == '') {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
@@ -262,14 +264,16 @@
 
             // Validate email address.
             if (!GeneralFunctions.validateEmail($('#email').val())) {
-                $('#email').css('border', '2px solid red');
+                $('#email').closest('.form-group').addClass('has-error');
                 throw EALang.invalid_email;
             }
 
             return true;
-
-        } catch(exc) {
-            $('#form-message').text(exc).show();
+        } catch(message) {
+            $('#form-message')
+                .addClass('alert-danger')
+                .text(message)
+                .show();
             return false;
         }
     };
@@ -287,7 +291,7 @@
         $('#add-edit-delete-group').show();
         $('#save-cancel-group').hide();
 
-        $('.record-details .required').css('border', '');
+        $('.record-details .has-error').removeClass('has-error');
         $('.record-details #form-message').hide();
 
         $('#filter-customers button').prop('disabled', false);
diff --git a/src/assets/js/backend_services_helper.js b/src/assets/js/backend_services_helper.js
index 59407616..4a8771a1 100644
--- a/src/assets/js/backend_services_helper.js
+++ b/src/assets/js/backend_services_helper.js
@@ -136,7 +136,7 @@
                 service.id = $('#service-id').val();
             }
 
-            if (!instance.validate(service)) {
+            if (!instance.validate()) {
                 return;
             }
 
@@ -235,12 +235,10 @@
     /**
      * Validates a service record.
      *
-     * @param {Object} service Contains the service data.
-     *
      * @return {Boolean} Returns the validation result.
      */
-    ServicesHelper.prototype.validate = function(service) {
-        $('#services .required').css('border', '');
+    ServicesHelper.prototype.validate = function() {
+        $('#services .has-error').removeClass('has-error');
 
         try {
             // validate required fields.
@@ -248,7 +246,7 @@
 
             $('#services .required').each(function() {
                 if ($(this).val() == '' || $(this).val() == undefined) {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
diff --git a/src/assets/js/backend_settings.js b/src/assets/js/backend_settings.js
index 0e272d60..9269fbd2 100644
--- a/src/assets/js/backend_settings.js
+++ b/src/assets/js/backend_settings.js
@@ -199,11 +199,11 @@ window.BackendSettings = window.BackendSettings || {};
                 }
 
                 if (response == false) {
-                    $input.css('border', '2px solid red');
+                    $input.closest('.form-group').addClass('has-error');
                     Backend.displayNotification(EALang.username_already_exists);
                     $input.attr('already-exists', 'true');
                 } else {
-                    $input.css('border', '');
+                    $input.closest('.form-group').removeClass('has-error');
                     $input.attr('already-exists', 'false');
                 }
             }, 'json').fail(GeneralFunctions.ajaxFailureHandler);
diff --git a/src/assets/js/backend_settings_system.js b/src/assets/js/backend_settings_system.js
index 5f0d3cf4..1ae6eb5c 100644
--- a/src/assets/js/backend_settings_system.js
+++ b/src/assets/js/backend_settings_system.js
@@ -103,14 +103,14 @@
      * @return {Boolean} Returns the validation result.
      */
     SystemSettings.prototype.validate = function() {
-        $('#general .required').css('border', '');
+        $('#general .has-error').removeClass('has-error');
 
         try {
             // Validate required fields.
             var missingRequired = false;
             $('#general .required').each(function() {
                 if ($(this).val() == '' || $(this).val() == undefined) {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
@@ -121,13 +121,13 @@
 
             // Validate company email address.
             if (!GeneralFunctions.validateEmail($('#company-email').val())) {
-                $('#company-email').css('border', '2px solid red');
+                $('#company-email').closest('.form-group').addClass('has-error');
                 throw EALang.invalid_email;
             }
 
             return true;
-        } catch(exc) {
-            Backend.displayNotification(exc);
+        } catch(message) {
+            Backend.displayNotification(message);
             return false;
         }
     };
diff --git a/src/assets/js/backend_settings_user.js b/src/assets/js/backend_settings_user.js
index c7c50227..dbc8816a 100644
--- a/src/assets/js/backend_settings_user.js
+++ b/src/assets/js/backend_settings_user.js
@@ -91,15 +91,14 @@
      * @return {Boolean} Returns the validation result.
      */
     UserSettings.prototype.validate = function() {
-        $('#user .required').css('border', '');
-        $('#user').find('#password, #retype-password').css('border', '');
+        $('#user .has-error').removeClass('has-error');
 
         try {
             // Validate required fields.
             var missingRequired = false;
             $('#user .required').each(function() {
                 if ($(this).val() === '' || $(this).val() === undefined) {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
@@ -110,18 +109,18 @@
 
             // Validate passwords (if provided).
             if ($('#password').val() != $('#retype-password').val()) {
-                $('#password, #retype-password').css('border', '2px solid red');
+                $('#password, #retype-password').closest('.form-group').addClass('has-error');
                 throw EALang.passwords_mismatch;
             }
 
             // Validate user email.
             if (!GeneralFunctions.validateEmail($('#email').val())) {
-                $('#email').css('border', '2px solid red');
+                $('#email').closest('.form-group').addClass('has-error');
                 throw EALang.invalid_email;
             }
 
             if ($('#username').attr('already-exists') === 'true') {
-                $('#username').css('border', '2px solid red');
+                $('#username').closest('.form-group').addClass('has-error');
                 throw EALang.username_already_exists;
             }
 
diff --git a/src/assets/js/backend_users.js b/src/assets/js/backend_users.js
index 5a5dd156..ddcbef43 100644
--- a/src/assets/js/backend_users.js
+++ b/src/assets/js/backend_users.js
@@ -203,12 +203,12 @@ window.BackendUsers = window.BackendUsers || {};
                 }
 
                 if (response == false) {
-                    $input.css('border', '2px solid red');
+                    $input.closest('.form-group').addClass('has-error');
                     $input.attr('already-exists', 'true');
                     $input.parents().eq(3).find('.form-message').text(EALang.username_already_exists);
                     $input.parents().eq(3).find('.form-message').show();
                 } else {
-                    $input.css('border', '');
+                    $input.closest('.form-group').removeClass('has-error');
                     $input.attr('already-exists', 'false');
                     if ($input.parents().eq(3).find('.form-message').text() == EALang.username_already_exists) {
                         $input.parents().eq(3).find('.form-message').hide();
diff --git a/src/assets/js/backend_users_admins.js b/src/assets/js/backend_users_admins.js
index c9d403e9..e618dd3c 100644
--- a/src/assets/js/backend_users_admins.js
+++ b/src/assets/js/backend_users_admins.js
@@ -165,7 +165,7 @@
                 admin.id = $('#admin-id').val();
             }
 
-            if (!this.validate(admin)) {
+            if (!this.validate()) {
                 return;
             }
 
@@ -235,13 +235,10 @@
     /**
      * Validates an admin record.
      *
-     * @param {Object} admin Contains the admin data to be validated.
-     *
      * @return {Boolean} Returns the validation result.
      */
-    AdminsHelper.prototype.validate = function(admin) {
-        $('#admins .required').css('border', '');
-        $('#admin-password, #admin-password-confirm').css('border', '');
+    AdminsHelper.prototype.validate = function() {
+        $('#admins .has-error').removeClass('has-error');
 
         try {
             // Validate required fields.
@@ -249,7 +246,7 @@
 
             $('#admins .required').each(function() {
                 if ($(this).val() == '' || $(this).val() == undefined) {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
@@ -260,32 +257,34 @@
 
             // Validate passwords.
             if ($('#admin-password').val() != $('#admin-password-confirm').val()) {
-                $('#admin-password, #admin-password-confirm').css('border', '2px solid red');
+                $('#admin-password, #admin-password-confirm').closest('.form-group').addClass('has-error');
                 throw EALang.passwords_mismatch;
             }
 
             if ($('#admin-password').val().length < BackendUsers.MIN_PASSWORD_LENGTH
                     && $('#admin-password').val() != '') {
-                $('#admin-password, #admin-password-confirm').css('border', '2px solid red');
+                $('#admin-password, #admin-password-confirm').closest('.form-group').addClass('has-error');
                 throw EALang.password_length_notice.replace('$number', BackendUsers.MIN_PASSWORD_LENGTH);
             }
 
             // Validate user email.
             if (!GeneralFunctions.validateEmail($('#admin-email').val())) {
-                $('#admin-email').css('border', '2px solid red');
+                $('#admin-email').closest('.form-group').addClass('has-error');
                 throw EALang.invalid_email;
             }
 
             // Check if username exists
             if ($('#admin-username').attr('already-exists') ==  'true') {
-                $('#admin-username').css('border', '2px solid red');
+                $('#admin-username').closest('.form-group').addClass('has-error');
                 throw EALang.username_already_exists;
             }
 
             return true;
-        } catch(exc) {
-            $('#admins .form-message').text(exc);
-            $('#admins .form-message').show();
+        } catch(message) {
+            $('#admins .form-message')
+                .addClass('alert-danger')
+                .text(message)
+                .show();
             return false;
         }
     };
@@ -300,8 +299,6 @@
         $('#admins .record-details').find('select').prop('disabled', true);
         $('#admins .form-message').hide();
         $('#admin-notifications').prop('disabled', true);
-        $('#admins .required').css('border', '');
-        $('#admin-password, #admin-password-confirm').css('border', '');
         $('#admins .record-details').find('input, textarea').val('');
         $('#admin-notifications').removeClass('active');
         $('#edit-admin, #delete-admin').prop('disabled', true);
diff --git a/src/assets/js/backend_users_providers.js b/src/assets/js/backend_users_providers.js
index f0514464..636bc8bb 100644
--- a/src/assets/js/backend_users_providers.js
+++ b/src/assets/js/backend_users_providers.js
@@ -186,7 +186,7 @@
                 provider.id = $('#provider-id').val();
             }
 
-            if (!this.validate(provider)) {
+            if (!this.validate()) {
                 return;
             }
 
@@ -288,20 +288,17 @@
     /**
      * Validates a provider record.
      *
-     * @param {Object} provider Contains the admin data to be validated.
-     *
      * @return {Boolean} Returns the validation result.
      */
-    ProvidersHelper.prototype.validate = function(provider) {
-        $('#providers .required').css('border', '');
-        $('#provider-password, #provider-password-confirm').css('border', '');
+    ProvidersHelper.prototype.validate = function() {
+        $('#providers .has-error').removeClass('has-error');
 
         try {
             // Validate required fields.
             var missingRequired = false;
             $('#providers .required').each(function() {
                 if ($(this).val() == '' || $(this).val() == undefined) {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
@@ -311,32 +308,34 @@
 
             // Validate passwords.
             if ($('#provider-password').val() != $('#provider-password-confirm').val()) {
-                $('#provider-password, #provider-password-confirm').css('border', '2px solid red');
+                $('#provider-password, #provider-password-confirm').closest('.form-group').addClass('has-error');
                 throw EALang.passwords_mismatch;
             }
 
             if ($('#provider-password').val().length < BackendUsers.MIN_PASSWORD_LENGTH
                     && $('#provider-password').val() != '') {
-                $('#provider-password, #provider-password-confirm').css('border', '2px solid red');
+                $('#provider-password, #provider-password-confirm').closest('.form-group').addClass('has-error');
                 throw EALang.password_length_notice.replace('$number', BackendUsers.MIN_PASSWORD_LENGTH);
             }
 
             // Validate user email.
             if (!GeneralFunctions.validateEmail($('#provider-email').val())) {
-                $('#provider-email').css('border', '2px solid red');
+                $('#provider-email').closest('.form-group').addClass('has-error');
                 throw EALang.invalid_email;
             }
 
             // Check if username exists
             if ($('#provider-username').attr('already-exists') ==  'true') {
-                $('#provider-username').css('border', '2px solid red');
+                $('#provider-username').closest('.form-group').addClass('has-error');
                 throw EALang.username_already_exists;
             }
 
             return true;
-        } catch(exc) {
-            $('#providers .form-message').text(exc);
-            $('#providers .form-message').show();
+        } catch(message) {
+            $('#providers .form-message')
+                .addClass('alert-danger')
+                .text(message)
+                .show();
             return false;
         }
     };
@@ -358,8 +357,6 @@
         $('#provider-notifications').removeClass('active');
         $('#provider-notifications').prop('disabled', true);
         $('#provider-services input:checkbox').prop('disabled', true);
-        $('#providers .required').css('border', '');
-        $('#provider-password, #provider-password-confirm').css('border', '');
         $('#providers .add-break, #reset-working-plan').prop('disabled', true);
         BackendUsers.wp.timepickers(true);
         $('#providers .working-plan input:text').timepicker('destroy');
diff --git a/src/assets/js/backend_users_secretaries.js b/src/assets/js/backend_users_secretaries.js
index 8a50ace4..404358b2 100644
--- a/src/assets/js/backend_users_secretaries.js
+++ b/src/assets/js/backend_users_secretaries.js
@@ -177,7 +177,7 @@
                 secretary.id = $('#secretary-id').val();
             }
 
-            if (!this.validate(secretary)) {
+            if (!this.validate()) {
                 return;
             }
 
@@ -247,20 +247,18 @@
     /**
      * Validates a secretary record.
      *
-     * @param {Object} secretary Contains the admin data to be validated.
-     *
      * @return {Boolean} Returns the validation result.
      */
-    SecretariesHelper.prototype.validate = function(secretary) {
-        $('#secretaries .required').css('border', '');
-        $('#secretary-password, #secretary-password-confirm').css('border', '');
+    SecretariesHelper.prototype.validate = function() {
+        $('#secretaries .has-error').removeClass('has-error');
+        $('#secretaries .form-message').removeClass('alert-danger');
 
         try {
             // Validate required fields.
             var missingRequired = false;
             $('#secretaries .required').each(function() {
                 if ($(this).val() == '' || $(this).val() == undefined) {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
@@ -270,33 +268,35 @@
 
             // Validate passwords.
             if ($('#secretary-password').val() != $('#secretary-password-confirm').val()) {
-                $('#secretary-password, #secretary-password-confirm').css('border', '2px solid red');
+                $('#secretary-password, #secretary-password-confirm').closest('.form-group').addClass('has-error');
                 throw 'Passwords mismatch!';
             }
 
             if ($('#secretary-password').val().length < BackendUsers.MIN_PASSWORD_LENGTH
                     && $('#secretary-password').val() != '') {
-                $('#secretary-password, #secretary-password-confirm').css('border', '2px solid red');
+                $('#secretary-password, #secretary-password-confirm').closest('.form-group').addClass('has-error');
                 throw 'Password must be at least ' + BackendUsers.MIN_PASSWORD_LENGTH
                         + ' characters long.';
             }
 
             // Validate user email.
             if (!GeneralFunctions.validateEmail($('#secretary-email').val())) {
-                $('#secretary-email').css('border', '2px solid red');
+                $('#secretary-email').closest('.form-group').addClass('has-error');
                 throw 'Invalid email address!';
             }
 
             // Check if username exists
             if ($('#secretary-username').attr('already-exists') ==  'true') {
-                $('#secretary-username').css('border', '2px solid red');
+                $('#secretary-username').closest('.form-group').addClass('has-error');
                 throw 'Username already exists.';
             }
 
             return true;
-        } catch(exc) {
-            $('#secretaries .form-message').text(exc);
-            $('#secretaries .form-message').show();
+        } catch(message) {
+            $('#secretaries .form-message')
+                .addClass('alert-danger')
+                .text(message)
+                .show();
             return false;
         }
     };
@@ -316,8 +316,7 @@
         $('#secretary-notifications').prop('disabled', true);
         $('#secretary-providers input:checkbox').prop('checked', false);
         $('#secretary-providers input:checkbox').prop('disabled', true);
-        $('#secretaries .required').css('border', '');
-        $('#secretary-password, #secretary-password-confirm').css('border', '');
+        $('#secretaries .has-error').removeClass('has-error');
 
         $('#filter-secretaries .selected').removeClass('selected');
         $('#filter-secretaries button').prop('disabled', false);
diff --git a/src/assets/js/frontend_book.js b/src/assets/js/frontend_book.js
index b3261d1d..f20ab148 100644
--- a/src/assets/js/frontend_book.js
+++ b/src/assets/js/frontend_book.js
@@ -345,7 +345,7 @@ window.FrontendBook = window.FrontendBook || {};
      * @return {Boolean} Returns the validation result.
      */
     function _validateCustomerForm() {
-        $('#wizard-frame-3 input').css('border', '');
+        $('#wizard-frame-3 input').closest('.form-group').removeClass('has-error');
 
         try {
             // Validate required fields.
@@ -353,7 +353,6 @@ window.FrontendBook = window.FrontendBook || {};
             $('.required').each(function() {
                 if ($(this).val() == '') {
                     $(this).parents('.form-group').addClass('has-error');
-                    // $(this).css('border', '2px solid red');
                     missingRequiredField = true;
                 }
             });
@@ -364,7 +363,6 @@ window.FrontendBook = window.FrontendBook || {};
             // Validate email address.
             if (!GeneralFunctions.validateEmail($('#email').val())) {
                 $('#email').parents('.form-group').addClass('has-error');
-                // $('#email').css('border', '2px solid red');
                 throw EALang.invalid_email;
             }
 
diff --git a/src/assets/js/frontend_book_api.js b/src/assets/js/frontend_book_api.js
index 227a70a9..51bf0fb9 100644
--- a/src/assets/js/frontend_book_api.js
+++ b/src/assets/js/frontend_book_api.js
@@ -112,9 +112,9 @@ window.FrontendBookApi = window.FrontendBookApi || {};
         var $captchaText = $('.captcha-text');
 
         if ($captchaText.length > 0) {
-            $captchaText.css('border', '');
+            $captchaText.closest('.form-group').removeClass('has-error');
             if ($captchaText.val() === '') {
-                $captchaText.css('border', '1px solid #dc3b40');
+                $captchaText.closest('.form-group').addClass('has-error');
                 return;
             }
         }
@@ -172,7 +172,7 @@ window.FrontendBookApi = window.FrontendBookApi || {};
 
                     $('.captcha-title small').trigger('click');
 
-                    $captchaText.css('border', '1px solid #dc3b40');
+                    $captchaText.closest('.form-group').addClass('has-error');
 
                     return false;
                 }
diff --git a/src/assets/js/installation.js b/src/assets/js/installation.js
index 445ad8bf..6a21be7b 100644
--- a/src/assets/js/installation.js
+++ b/src/assets/js/installation.js
@@ -83,13 +83,13 @@ $(document).ready(function() {
     function validate() {
         try {
             $('.alert').hide();
-            $('input').css('border', '');
+            $('input').closest('.form-group').removeClass('has-error');
 
             // Check for empty fields.
             var missingRequired = false;
             $('input').each(function() {
                 if ($(this).val() == '') {
-                    $(this).css('border', '2px solid red');
+                    $(this).closest('.form-group').addClass('has-error');
                     missingRequired = true;
                 }
             });
@@ -100,25 +100,25 @@ $(document).ready(function() {
 
             // Validate Passwords
             if ($('#password').val() != $('#retype-password').val()) {
-                $('#password').css('border', '2px solid red');
-                $('#retype-password').css('border', '2px solid red');
+                $('#password').closest('.form-group').addClass('has-error');
+                $('#retype-password').closest('.form-group').addClass('has-error');
                 throw 'Passwords do not match!';
             }
 
             if ($('#password').val().length < MIN_PASSWORD_LENGTH) {
-                $('#password').css('border', '2px solid red');
-                $('#retype-password').css('border', '2px solid red');
+                $('#password').closest('.form-group').addClass('has-error');
+                $('#retype-password').closest('.form-group').addClass('has-error');
                 throw 'The password must be at least ' + MIN_PASSWORD_LENGTH + ' characters long.';
             }
 
             // Validate Email
             if (!GeneralFunctions.validateEmail($('#email').val())) {
-                $('#email').css('border', '2px solid red');
+                $('#email').closest('.form-group').addClass('has-error');
                 throw 'The email address is invalid!';
             }
 
             if (!GeneralFunctions.validateEmail($('#company-email').val())) {
-                $('#company-email').css('border', '2px solid red');
+                $('#company-email').closest('.form-group').addClass('has-error');
                 throw 'The email address is invalid!';
             }