Fix: Remove JQuery validate (#410)

* remove the jquery validation of group and category

* add the validation of category fields

* add the validation of group fields

* remove jquery validate imports

app/assets/javascripts/bp_admin.js

@@ -910,22 +910,6 @@ jQuery(".admin.index").ready(function() {
       }
   });
 
-  jQuery(document).on("reveal.facebox", function (event) {
-    jQuery("#facebox form[data-collection=groups]").validate({
-      errorClass: "groupFormError",
-      errorElement: "div",
-      rules: {
-        "group[name]": "required",
-        "group[acronym]": "required",
-      },
-      messages: {
-        "group[name]": "Please enter a name",
-        "group[acronym]": "Please enter an acronym",
-      },
-    });
-
-  });
-
   jQuery('#group_new_action').on('click', function (event) {
     jQuery.facebox({
       ajax: "/admin/groups/new?time=" + new Date().getTime()
@@ -983,22 +967,6 @@ jQuery(".admin.index").ready(function() {
     }
   });
 
-  jQuery(document).on("reveal.facebox", function (event) {
-    jQuery("#facebox form[data-collection=categories]").validate({
-      errorClass: "categoryFormError",
-      errorElement: "div",
-      rules: {
-        "category[name]": "required",
-        "category[acronym]": "required",
-      },
-      messages: {
-        "category[name]": "Please enter a name",
-        "category[acronym]": "Please enter an acronym",
-      },
-    });
-
-  });
-
   jQuery('#category_new_action').on('click', function (event) {
     jQuery.facebox({
       ajax: "/admin/categories/new?time=" + new Date().getTime()

app/views/admin/categories/_form.html.haml

@@ -1,5 +1,31 @@
 - new_record = @category.acronym.nil?
-%div.alert-box.error{style: @errors.nil? ?  "display: none" : nil }
+
+:javascript
+  function validateCategoryForm() {
+    var acronymField = document.getElementById('category_acronym');
+    var nameField = document.getElementById('category_name');
+    var errorAcronym = document.getElementById('error-category-acronym');
+    var errorName = document.getElementById('error-category-name');
+
+    errorAcronym.innerText = '';
+    errorName.innerText = '';
+
+    var isValid = true;
+
+    if (acronymField.value.trim() === '') {
+      errorAcronym.innerText = 'Please enter an acronym';
+      isValid = false;
+    }
+
+    if (nameField.value.trim() === '') {
+      errorName.innerText = 'Please enter a name';
+      isValid = false;
+    }
+
+    return isValid;
+  }
+
+%div.alert-box.error{style: @errors.nil? ? 'display: none' : nil }
   %ul
     - unless @errors.nil?
       - for error in @errors
@@ -18,15 +44,17 @@
         %span.asterik *
       %td.top
         - if new_record
-          = f.text_field :acronym, class: "form-control"
+          = f.text_field :acronym, class: "form-control", id: "category_acronym"
+          %div#error-category-acronym.groupFormError
         - else
           = f.text_field :acronym, class: "form-control", readonly: true
     %tr
       %th
         Name
         %span.asterik *
       %td.top
-        = f.text_field :name, class: "form-control"
+        = f.text_field :name, class: "form-control", id: "category_name"
+        %div#error-category-name.groupFormError
     %tr
       %th
         Description
@@ -45,5 +73,5 @@
           = render SelectInputComponent.new(id: "category_ontologies", name: "category[ontologies]", values: @ontologies_category, selected: @category.ontologies, multiple: true, open_to_add_values: true)
           %div.d-flex.mt-1{:style => "display: none;"}
   %div.mt-2
-    = f.submit button_text, class: "btn btn-primary mr-sm-2 group-form-accept"
-    = link_to "Cancel", "javascript:;", class: "btn btn-primary dismiss-dialog"
+    %input{type: "submit", value: button_text, class: "btn btn-primary mr-sm-2 group-form-accept", onclick: "return validateCategoryForm();"}
+    %a{href: "javascript:;", class: "btn btn-primary dismiss-dialog"} Cancel

app/views/admin/groups/_form.html.haml

@@ -1,5 +1,30 @@
 - new_record = @group.acronym.nil?
-%div.alert-box.error{style: @errors.nil? ?  "display: none" : nil }
+
+:javascript
+  function validateForm() {
+    var acronymField = document.getElementById('group_acronym');
+    var nameField = document.getElementById('group_name');
+    var errorAcronym = document.getElementById('error-acronym');
+    var errorName = document.getElementById('error-name');
+
+    errorAcronym.innerText = '';
+    errorName.innerText = '';
+
+    var isValid = true; 
+
+    if (acronymField.value.trim() === '') {
+      errorAcronym.innerText = 'Please enter an acronym';
+      isValid = false;
+    }
+
+    if (nameField.value.trim() === '') {
+      errorName.innerText = 'Please enter a name';
+      isValid = false;
+    }
+
+    return isValid;
+  }
+%div.alert-box.error{style: @errors.nil? ? 'display: none' : nil }
   %ul
     - unless @errors.nil?
       - for error in @errors
@@ -18,15 +43,17 @@
         %span.asterik *
       %td.top
         - if new_record
-          = f.text_field :acronym, class: "form-control"
+          = f.text_field :acronym, class: "form-control", id: "group_acronym"
+          %div#error-acronym.groupFormError
         - else
           = f.text_field :acronym, class: "form-control", readonly: true
     %tr
       %th
         Name
         %span.asterik *
       %td.top
-        = f.text_field :name, class: "form-control"
+        = f.text_field :name, class: "form-control", id: "group_name"
+        %div#error-name.groupFormError
     %tr
       %th
         Description
@@ -44,5 +71,5 @@
         %td.top
           = render SelectInputComponent.new(id: "group_ontologies", name: "group[ontologies]", values: @ontologies_group , selected: @group.ontologies , multiple: true, open_to_add_values: true)
   %div.mt-2
-    = f.submit button_text, class: "btn btn-primary mr-sm-2 group-form-accept"
-    = link_to "Cancel", "javascript:;", class: "btn btn-primary dismiss-dialog"
+    %input{type: "submit", value: button_text, class: "btn btn-primary mr-sm-2 group-form-accept", onclick: "return validateForm();"}
+    %a{href: "javascript:;", class: "btn btn-primary dismiss-dialog"} Cancel

app/views/layouts/_header.html.erb

@@ -24,7 +24,6 @@
 
   <!-- JavaScript -->
   <%= javascript_include_tag "vendor" %>
-  <%= javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" %>
 
   <script>
     jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});

app/views/layouts/appliance.html.haml

@@ -15,7 +15,6 @@
     = stylesheet_link_tag "application", media: "all"
 
     = javascript_include_tag "vendor"
-    = javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"
 
     %script
       jQuery(document).data({bp: {config: #{bp_config_json.html_safe}, user: #{(session[:user] || {}).to_hash.to_json.html_safe}}});

app/views/layouts/popup.html.erb

@@ -12,7 +12,6 @@
   <%= stylesheet_link_tag "application" %>  
   <%= javascript_include_tag "vendor" %>
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js" %>
-  <%= javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" %>
   <script>
     jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});
     jQuery(document).data().bp.ontology = <%=@ontology.to_json.html_safe%> || {};