Support valdiation for form_dat

content/multipledataset.html

@@ -34,7 +34,7 @@ draft: false
   }
   window.onload = async () => {
     window.browser = bowser.getParser(window.navigator.userAgent);
-    $("input[type='checkbox']:checked").trigger("change")
+    $("input[type='checkbox']").trigger("change")
     $("input[type='number'].range").trigger("change")
     adjustSticky();
     $(window).resize(adjustSticky)
@@ -184,9 +184,6 @@ draft: false
     if (fillArray.includes(afters.prop("name"))) {
       selectSelectAll(afters.first())
     }
-    var submit = $(e.target.form).find(':submit')
-    submit.prop("disabled", !isLast)
-
   }
   async function reloadSelect(name) {
     clearSelect(name)
@@ -573,33 +570,34 @@ draft: false
             data-neednotbrowser='{"OS":["MacOS"]}'>Ctrl</kbd>+<kbd>A</kbd> shortcut key</span>
     </p>
     <div style="display: inline-block;">
-      <label for="DOI_select">Sets</label>
+      <label for="DOI_select" class="required">Sets</label>
-      <button class="SelectAll" type="button" onclick="selectSelectAll_click(event)">Select all</button>
+      <button class="SelectAll"  type="button" onclick="selectSelectAll_click(event)">Select all</button>
-      <select multiple id="DOI_select" name="DOI" onchange="reloadNextSelect(event)"></select>
+      <select multiple id="DOI_select" required name="DOI" onchange="reloadNextSelect(event)"></select>
     </div>
     <div style="display:inline-block">
-      <label for="mol_select">Molecules</label>
+      <label for="mol_select" class="required">Molecules</label>
       <button class="SelectAll" type="button" onclick="selectSelectAll_click(event)">Select all</button>
-      <select multiple id="mol_select" name="molecule" onchange="reloadNextSelect(event)"></select>
+      <select multiple id="mol_select" required name="molecule" onchange="reloadNextSelect(event)"></select>
     </div>
     <br />
     <div style="display: inline-block;">
-      <label for="method_select">Methods</label>
+      <label for="method_select" class="required">Methods</label>
       <button class="SelectAll" type="button" onclick="selectSelectAll_click(event)">Select all</button>
-      <select multiple id="method_select" name="method" onchange="reloadNextSelect(event)"></select>
+      <select multiple id="method_select" required name="method" onchange="reloadNextSelect(event)"></select>
     </div>
     <div style="display: inline-block;">
-      <label for="basis_select">Basis sets</label>
+      <label for="basis_select" class="required">Basis sets</label>
       <button class="SelectAll" type="button" onclick="selectSelectAll_click(event)">Select all</button>
-      <select multiple id="basis_select" name="basis" onchange="reloadNextSelect(event)"></select>
+      <select multiple id="basis_select" required name="basis" onchange="reloadNextSelect(event)"></select>
     </div>
   </fieldset>
   <fieldset>
-    <legend>Vertical excitation kind</legend>
+    <legend class="required"
+    >Vertical excitation kind</legend>
     <p>Choose what kind of vertical excitations you want</p>
     <ul class="nestedCbList" style="padding-left: 0em;">
       <li>
-        <input type="checkbox" checked onchange="nestedCheckbox_change(event)" id="cb_fileType_All"></input>
+        <input type="checkbox" data-onerequired="true" checked onchange="nestedCheckbox_change(event)" id="cb_fileType_All"></input>
         <label for="cb_fileType_All"> All</label>
       </li>
       <ul class="nestedCbList" id="cb_exVertKindList">
@@ -615,11 +613,11 @@ draft: false
     </ul>
   </fieldset>
   <fieldset id="excitationFilter">
-    <legend>Filters</legend>
+    <legend class="required">Filters</legend>
     <p>Choose other excitation parameters you want</p>
     <ul class="nestedCbList" style="padding-left: 0em;">
       <li>
-        <input type="checkbox" onchange="nestedCheckbox_change(event)" id="cb_exType_All"></input>
+        <input type="checkbox" data-onerequired="true" onchange="nestedCheckbox_change(event)" id="cb_exType_All"></input>
         <label for="cb_exType_All"> All</label>
       </li>
       <ul id="cb_exTypeList" class="nestedCbList">
@@ -640,7 +638,7 @@ draft: false
       onchange="numberRangeChange(event)" max="100" value="100">
   </fieldset>
 </fieldset>
-  <input type="submit" disabled=true value="Load"></input>
+  <input type="submit" value="Load"></input>
 </form>
 <form id="form_ref">
   <fieldset class="main">

static/css/form.css

@@ -23,6 +23,10 @@ form label{
   padding-left: 5px;
   padding-right: 5px;
 }
+form legend.required::after,form label.required::after {
+  content: " *";
+  color: red;
+}
 form fieldset.table div {
   display: table-row;
 }

static/js/nestedCheckbox.js

@@ -7,6 +7,7 @@ function nestedCheckbox_change(e) {
       ul.children("li").children("input[type=checkbox]").prop("checked", checkbox.is(":checked"));
     }
   }
+  nestedCheckbox_refreshMainValidity(checkbox)
   //Apply parent
   var ul=checkbox.parent("li").parent("ul")
   var checkbox=$(ul).prev("li").children("input[type=checkbox]")
@@ -21,4 +22,17 @@ function nestedCheckbox_change(e) {
     checkbox.prop("indeterminate",false);
     checkbox.prop("checked",scheckeds[0]);
   }
+  nestedCheckbox_refreshMainValidity(checkbox)
+}
+function nestedCheckbox_refreshMainValidity(checkbox) {
+  if (checkbox.data("onerequired") && !(checkbox.is(":checked") || checkbox.is(":indeterminate")) )  {
+    checkbox.first().each(function() {
+      this.setCustomValidity("Please check at least one of the checkboxes below")
+    })
+  }
+  else {
+    checkbox.first().each(function() {
+      this.setCustomValidity("")
+    })
+  }
 }