Adding javascript validation of the description

Moving required field validation to a Vite class
Adding a Required field partial to make the javascript more consistent

app/assets/javascripts/edit_work_utils.js

@@ -282,18 +282,6 @@ $(() => {
     return null;
   }
 
-  // Returns true if there is at least one creator with information
-  function hasCreators() {
-    let i;
-    const rows = $('.creators-table-row');
-    for (i = 0; i < rows.length; i += 1) {
-      if (!isEmptyRow(rows[i].id)) {
-        return true;
-      }
-    }
-    return false;
-  }
-
   // Sets the values of a creator given a rowId
   function setCreatorValues(rowId, orcid, givenName, familyName) {
     const suffix = rowId.replace('creator_row_', '');
@@ -385,29 +373,6 @@ $(() => {
     updateCreatorsSequence();
   });
 
-  // Client side validations before allowing user to create the dataset.
-  $('#btn-create-new').on('click', () => {
-    const title = $('#title_main').val() || '';
-    let status = true;
-
-    $('#title-required-message').addClass('hidden');
-    $('#creators-required-message').addClass('hidden');
-
-    if (!hasCreators()) {
-      $(`#${findEmptyCreator()}`).focus();
-      $('#creators-required-message').removeClass('hidden');
-      status = false;
-    }
-
-    if (title.trim() === '') {
-      $('#title_main').focus();
-      $('#title-required-message').removeClass('hidden');
-      status = false;
-    }
-
-    return status;
-  });
-
   // Delete button for creators.
   //
   // Notice the use of $(document).on("click", selector, ...) instead of the

app/javascript/entrypoints/pdc/edit_required_fields.es6

@@ -0,0 +1,86 @@
+/* eslint class-methods-use-this: ["error", { "exceptMethods": ["isEmptyRow"] }] */
+
+export default class EditRequiredFields {
+  attach_validations() {
+    // Client side validations before allowing user to create the dataset.
+    $('#btn-create-new').on('click', this.validate_required.bind(this));
+    if ($('#description') !== undefined) {
+      $('#btn-submit').on('click', this.validate_required_step2.bind(this));
+    }
+  }
+
+  validate_required() {
+    const title = $('#title_main').val() || '';
+    let status = true;
+
+    $('#title-required-message').addClass('hidden');
+    $('#creators-required-message').addClass('hidden');
+
+    if (!this.hasCreators()) {
+      $(`#${this.findEmptyCreator()}`).focus();
+      $('#creators-required-message').removeClass('hidden');
+      status = false;
+    }
+
+    if (title.trim() === '') {
+      $('#title_main').focus();
+      $('#title-required-message').removeClass('hidden');
+      status = false;
+    }
+
+    return status;
+  }
+
+  validate_required_step2() {
+    const description = $('#description').val() || '';
+    let status = this.validate_required();
+    $('#description-required-message').addClass('hidden');
+
+    if (description.trim() === '') {
+      if (status) $('#description').focus();
+      $('#description-required-message').removeClass('hidden');
+      status = false;
+    }
+    return status;
+  }
+
+  // Returns true if there is at least one creator with information
+  hasCreators() {
+    let i;
+    const rows = $('.creators-table-row');
+    for (i = 0; i < rows.length; i += 1) {
+      if (!this.isEmptyRow(rows[i].id)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  // Returns true if the "user entered" textboxes for the row are empty.
+  isEmptyRow(rowId) {
+    let i; let textboxId; let value;
+    const $textboxes = $(`#${rowId} > td > input`);
+    for (i = 0; i < $textboxes.length; i += 1) {
+      textboxId = $textboxes[i].id;
+      if (textboxId.startsWith('orcid_') || textboxId.startsWith('given_name_') || textboxId.startsWith('family_name_')) {
+        value = $(`#${textboxId}`).val().trim();
+        if (value !== '') {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  // Returns the ID of the first row that has an empty creator (if any)
+  findEmptyCreator() {
+    let i;
+    const rows = $('.creators-table-row');
+    for (i = 0; i < rows.length; i += 1) {
+      if (this.isEmptyRow(rows[i].id)) {
+        return rows[i].id;
+      }
+    }
+    return null;
+  }
+}

app/javascript/entrypoints/pdc/pdc_ui_loader.es6

@@ -1,5 +1,6 @@
 import CopytoClipboard from './copy_to_clipboard.es6';
 import MaximumFileUpload from './maximum_file_upload.es6';
+import EditRequiredFields from './edit_required_fields.es6';
 
 /* eslint class-methods-use-this: ["error", { "exceptMethods": ["setup_fileupload_validation"] }] */
 
@@ -12,5 +13,6 @@ export default class PdcUiLoader {
     (new MaximumFileUpload('patch_pre_curation_uploads', 'file-upload')).attach_validation();
     (new MaximumFileUpload('pre_curation_uploads', 'btn-submit')).attach_validation();
     (new CopytoClipboard()).attach_copy();
+    (new EditRequiredFields()).attach_validations();
   }
 }

app/views/works/_required_creators_table.html.erb

@@ -1,15 +1,11 @@
 <!-- Creators section -->
 <div class="field">
-  <details>
-    <summary>
-      Creator(s)<span class="required-field">*</span>
-      <span id="creators-required-message" class="hidden">
-        <i class="bi bi-exclamation-diamond-fill required-field"></i>&nbsp;Must provide at least one creator
-      </span>
-    </summary>
-    Enter the full names of all persons primarily responsible for creating this item.
-    At least one creator must be provided.
-  </details>
+  <%= render partial: "required_form_field_details", locals: { name: "creators", display_name: "Creator(s)", 
+                                                              field_detail: "Enter the full names of all persons primarily responsible for creating this item.
+                                                              At least one creator must be provided.",
+                                                              field_error: "Must provide at least one creator"
+                                                              }
+  %>
 
   <!--
     Render the list of creators a hidden SPANs that are then added below

app/views/works/_required_form.html.erb

@@ -16,10 +16,10 @@
 
 <!-- Description (one for now)-->
 <div class="field">
-  <details>
-    <summary>Description<span class="required-field">*</span></summary>
-    Please enter a brief summary of this item specifically &mdash; not identical to the abstract of a corresponding paper. The focus should be on the nature of the materials constituting the item (scope, purpose, methods, etc.), as opposed to substantive claims made in related publications.
-  </details>
+  <%= render partial: "required_form_field_details", locals: { name: "description", display_name: "Description", 
+                                                       field_detail: "Please enter a brief summary of this item specifically &mdash; not identical to the abstract of a corresponding paper. The focus should be on the nature of the materials constituting the item (scope, purpose, methods, etc.), as opposed to substantive claims made in related publications.",
+                                                      }
+  %>
   <textarea type="text" id="description" name="description" class="input-text-long" rows="5" cols="120"
     placeholder="Please enter a brief summary describing the unique attributes of this submission. (e.g., The purpose, scope, methods, dependencies, etc. for the object(s) deposited to this submission.) It should be unique from a description or abstract used for a corresponding paper."
   ><%= @work.resource.description %></textarea>

app/views/works/_required_form_field_details.html.erb

@@ -0,0 +1,10 @@
+<% field_error ||= "Must provide a #{name}" %>
+<details>
+<summary>
+  <%= display_name %><span class="required-field" title="<%= display_name %> for your submission must be indicated">*</span>
+  <span id="<%= name %>-required-message" class="hidden">
+    <i class="bi bi-exclamation-diamond-fill required-field"></i>&nbsp;<%= field_error %>
+  </span>
+</summary>
+<%= field_detail %>
+</details>

app/views/works/_required_title.html.erb

@@ -1,14 +1,9 @@
 <!-- Render the main title (notice that we don't display a dropdown for this title) -->
 <div class="field">
-  <details>
-    <summary>
-      Title<span class="required-field" title="Title for your submission must be indicated">*</span>
-      <span id="title-required-message" class="hidden">
-        <i class="bi bi-exclamation-diamond-fill required-field"></i>&nbsp;Must provide a title
-      </span>
-    </summary>
-    Provide an informative and distinctive title for the item as a whole &mdash; not identical to that of a corresponding paper.
-  </details>
+  <%= render partial: "required_form_field_details", locals: { name: "title", display_name: "Title", 
+                                                       field_detail: "Provide an informative and distinctive title for the item as a whole &mdash; not identical to that of a corresponding paper.",
+                                                      }
+  %>
   <input type="text" id="title_main" name="title_main" class="input-text-long"
     value="<%= @work&.resource&.main_title %>"
   />

spec/system/work_create_spec.rb

@@ -41,6 +41,9 @@
     it "produces and saves a valid datacite record", js: true do
       sign_in user
       visit new_work_path(params: { wizard: true })
+      click_on "Create New"
+      expect(page).to have_content("Must provide a title")
+      expect(page).to have_content("Must provide at least one creator")
       fill_in "title_main", with: title
       expect(find("#related_object_count", visible: false).value).to eq("1")
 
@@ -67,6 +70,8 @@
       click_on "Create New"
       work = Work.last
       expect(work.resource.related_objects.count).to eq(0)
+      click_on "Save Work"
+      expect(page).to have_content("Must provide a description")
       fill_in "description", with: description
       select "GNU General Public License", from: "rights_identifier"
       click_on "Curator Controlled"

spec/system/work_edit_spec.rb

@@ -20,15 +20,6 @@
     let(:work) { FactoryBot.create(:draft_work) }
     let(:user) { work.created_by_user }
 
-    let(:uploaded_file1) do
-      fixture_file_upload("us_covid_2019.csv", "text/csv")
-    end
-    let(:uploaded_file2) do
-      fixture_file_upload("us_covid_2020.csv", "text/csv")
-    end
-    let(:uploaded_file3) do
-      fixture_file_upload("orcid.csv", "text/csv")
-    end
     let(:bucket_url) do
       "https://example-bucket.s3.amazonaws.com/"
     end
@@ -49,8 +40,6 @@
 
       stub_request(:put, /#{bucket_url}/).to_return(status: 200)
       stub_request(:delete, /#{delete_url}/).to_return(status: 200)
-      work.pre_curation_uploads.attach(uploaded_file1)
-      work.pre_curation_uploads.attach(uploaded_file2)
       work.save
 
       sign_in user