Grid answer type validation for onSubmit action


#1

Sample bellow shows standart validation pattern for grid answe type

<#include "extras.ftl" parse=true/>
<#include "html.ftl" parse=true/>
<#include "answers.ftl" parse=true/>
<#assign FEEDBACK_ENABLED = true>

<@hit contentCss="${applicationResourceUrl}/workfusion-resources/saas/ms/ms.bootstrap.min.css">
<@script src="${applicationResourceUrl}/workfusion-resources/bootstrap/js/bootstrap-tab.js"/>

<style type="text/css">
    .valid {
        font-weight: bold;
        color: green;
    }

    .not-valid {
        font-weight: bold;
        color: red;
    }
</style>
<script type="text/javascript">

  $(document).ready(function() {
      var originalvalid = valid;
      valid = function(e) {

          // grid only one for separate page , read data from grid
          // grid input data is {"document_type_list":[{"first_page":"1","last_page":"","document_type":"document"}]}

          // check the array for values
      	  // inpud data is json
          var gridData = GRID.Main.handsonTable().getData();
          var ranges = [];
          var documentPageIndex = 0;
          var firstPageIndex = 1;
          var lastPageIndex = 2;
          var total = 50;

          ranges.push({
              first: 0,
              last: 0
          });

          for (var i = 0; i < gridData.length; i++) {
              if (gridData[i][documentPageIndex] != null) {
                  ranges.push({
                      first: Number(gridData[i][firstPageIndex]),
                      last: Number(gridData[i][lastPageIndex])
                  });
              }
          }

     // check if valid or invalid and show alert
	 if (!validate(ranges, total)) {
             alert("Check entered data!");
             return false;
          }

          if (confirm("Are you sure?")) {
              originalvalid();
              return true;
          } else {
              return false;
          }

      }
  });

  function validate(ranges, total) {
  // validation sample true is valid, false is not valid
  // if not valid showing alert for users

      ranges.sort(function(a, b) {
          return a.first - b.first || a.last - b.last;
      });


      for (var i = 1; i < ranges.length; i++) {
          if (ranges[i].first - ranges[i - 1].last != 1) {
              return false;
          }
          if (ranges[i].first > ranges[i].last) {
              return false;
          }
          if (ranges[i].last > total) {
              return false;
          }
      }

      return true;
  }


  });


</script>

<@instructions title="<h2>Review Step</h2>">
  <!--- editable content -->
  <@editable id="__INSTRUCTIONS__"><br><br></@editable>
</@instructions>
<@form>
<#if questions??>
    <div class="thumbnail">
    <#list questions as question>
      <@report question=question includeAll=true/>
      <div style="position:relative;margin:2px 0px" class="block question">
           <div style="position:absolute;top:0px;right:0px;background-color:#e0e0e0;padding:1px 4px;border: 1px solid #C0C0C0;border-radius: 0px" class="number">
                <b>${question_index + 1}</b>
           </div>
           <div>
               <div class="place bg-dark">
                 <@editable id="__DATA__"><br><br></@editable>
               </div>
               <div class="place">
                 <@answers question=question/>
               </div>
            </div>
      </div>
    </#list>
    </div>
</#if>
<@submit text="Submit" />
</@form>
</@hit>