Add `form` validation for `doctrines#modal_form`

app/components/doctrine_modal_form_component/doctrine_modal_form_component.html.erb

@@ -7,12 +7,13 @@
       </div>
 
       <div class="modal-body">
-          <div class="mb-3">
-            <label for="subject-name" class="col-form-label"> Subjects </label>
-            <%= hidden_field_tag :document_id, nil, data: { target: "doctrines.document_id" } %>
-            <%= hidden_field_tag :doctrine_id, nil, data: { target: "doctrines.doctrine_id" } %>
-            <select class="form-control subject-ids-selectize ps-0" name="subject_ids[]" id="subject_ids_" multiple="true"> </select>
-          </div>
+        <div class="mb-3">
+          <label for="subject-name" class="col-form-label"> Subjects </label>
+          <%= hidden_field_tag :document_id, nil, data: { target: "doctrines.document_id" } %>
+          <%= hidden_field_tag :doctrine_id, nil, data: { target: "doctrines.doctrine_id" } %>
+          <select class="form-control subject-ids-selectize ps-0" name="subject_ids[]" id="subject_ids_" multiple="true" required> </select>
+          <div class="invalid-feedback" id="subjects-blank-message"> Subject/s cannot be blank. </div>
+        </div>
 
         <div class="mb-3" id="doctine_content_suggestions_div">
           <label for="subject-name" class="col-form-label">Doctine content suggestions</label>
@@ -21,12 +22,14 @@
 
         <div class="mb-3">
           <label for="subject-name" class="col-form-label">Head Note</label>
-          <%= text_field_tag :headnote, nil, class: "form-control", placeholder: "Head note", data: { target: "doctrines.headnote" } %>
+          <%= text_field_tag :headnote, nil, class: "form-control", placeholder: "Head note", required: true, data: { target: "doctrines.headnote" } %>
+          <div class="invalid-feedback" id="headnote-blank-message"> Headnote cannot be blank. </div>
         </div>
 
         <div class="mb-3">
           <label for="subject-name" class="col-form-label">Content</label>
-          <%= rich_text_area_tag :content, nil, placeholder: "Doctrine Content", data: { target: "doctrines.content" } %>
+          <%= rich_text_area_tag :content, nil, placeholder: "Doctrine Content", required: true, data: { target: "doctrines.content" } %>
+          <div class="invalid-feedback" id="content-blank-message"> Content cannot be blank. </div>
         </div>
       </div>
       <div class="modal-footer">

app/javascript/controllers/doctrines_controller.js

@@ -53,21 +53,36 @@ export default class extends ApplicationController {
     var params = { subject_ids: $modal.find("select[name='subject_ids[]']").val(), headnote: this.headnoteTarget.value, 
                    content: this.contentTarget.value }
 
-    if (doctrine_id !== null && doctrine_id !== undefined && doctrine_id !== "") {
-      $.ajax({
-        url: "/api/doctrines/" + doctrine_id,
-        type: 'PUT',
-        data: params,
-        success: function() {
-          location.pathname = "/documents/" + document_id + "/doctrines/" + doctrine_id
-        }
-      })
-    } else {
-      $.post("/api/doctrines", $.extend({ jurisprudence_ids: [document_id] }, params), function(data, status) {
-        if(status === 'success') {
-          location.pathname = "/documents/" + document_id + "/doctrines/" + data.id
-        }
-      })
+
+    if (!params.subject_ids.length) {
+      $("#subjects-blank-message").show()
+    }
+
+    if (!params.headnote.length) {
+      $("#headnote-blank-message").show()
+    }
+
+    if (!params.content.length) {
+      $("#content-blank-message").show()
+    }
+
+    if (params.subject_ids.length && params.headnote.length && params.content.length) {
+      if (doctrine_id !== null && doctrine_id !== undefined && doctrine_id !== "") {
+        $.ajax({
+          url: "/api/doctrines/" + doctrine_id,
+          type: 'PUT',
+          data: params,
+          success: function() {
+            location.pathname = "/documents/" + document_id + "/doctrines/" + doctrine_id
+          }
+        })
+      } else {
+        $.post("/api/doctrines", $.extend({ jurisprudence_ids: [document_id] }, params), function(data, status) {
+          if(status === 'success') {
+            location.pathname = "/documents/" + document_id + "/doctrines/" + data.id
+          }
+        })
+      }
     }
   }