[Summary view] [Print] [Text view]

   1  // This file is part of Moodle - http://moodle.org/
   2  //
   3  // Moodle is free software: you can redistribute it and/or modify
   4  // it under the terms of the GNU General Public License as published by
   5  // the Free Software Foundation, either version 3 of the License, or
   6  // (at your option) any later version.
   7  //
   8  // Moodle is distributed in the hope that it will be useful,
   9  // but WITHOUT ANY WARRANTY; without even the implied warranty of
  10  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  11  // GNU General Public License for more details.
  12  //
  13  // You should have received a copy of the GNU General Public License
  14  // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
  15  
  16  /**
  17   * Custom form error event handler to manipulate the bootstrap markup and show
  18   * nicely styled errors in an mform.
  19   *
  20   * @module     theme_boost/form-display-errors
  21   * @copyright  2016 Damyon Wiese <damyon@moodle.com>
  22   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  23   */
  24  define(['jquery', 'core/event'], function($, Event) {
  25      return {
  26          enhance: function(elementid) {
  27              var element = document.getElementById(elementid);
  28              if (!element) {
  29                  // Some elements (e.g. static) don't have a form field.
  30                  // Hence there is no validation. So, no setup required here.
  31                  return;
  32              }
  33  
  34              $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
  35                  event.preventDefault();
  36                  var parent = $(element).closest('.form-group');
  37                  var feedback = parent.find('.form-control-feedback');
  38                  const feedbackId = feedback.attr('id');
  39  
  40                  // Get current aria-describedby value.
  41                  let describedBy = $(element).attr('aria-describedby');
  42                  if (typeof describedBy === "undefined") {
  43                      describedBy = '';
  44                  }
  45                  // Split aria-describedby attribute into an array of IDs if necessary.
  46                  let describedByIds = [];
  47                  if (describedBy.length) {
  48                      describedByIds = describedBy.split(" ");
  49                  }
  50                  // Find the the feedback container in the aria-describedby attribute.
  51                  const feedbackIndex = describedByIds.indexOf(feedbackId);
  52  
  53                  // Sometimes (atto) we have a hidden textarea backed by a real contenteditable div.
  54                  if (($(element).prop("tagName") == 'TEXTAREA') && parent.find('[contenteditable]')) {
  55                      element = parent.find('[contenteditable]');
  56                  }
  57                  if (msg !== '') {
  58                      parent.addClass('has-danger');
  59                      parent.data('client-validation-error', true);
  60                      $(element).addClass('is-invalid');
  61                      // Append the feedback ID to the aria-describedby attribute if it doesn't exist yet.
  62                      if (feedbackIndex === -1) {
  63                          describedByIds.push(feedbackId);
  64                          $(element).attr('aria-describedby', describedByIds.join(" "));
  65                      }
  66                      $(element).attr('aria-invalid', true);
  67                      feedback.attr('tabindex', 0);
  68                      feedback.html(msg);
  69  
  70                      // Only display and focus when the error was not already visible.
  71                      // This is so that, when tabbing around the form, you don't get stuck.
  72                      if (!feedback.is(':visible')) {
  73                          feedback.show();
  74                          feedback.focus();
  75                      }
  76  
  77                  } else {
  78                      if (parent.data('client-validation-error') === true) {
  79                          parent.removeClass('has-danger');
  80                          parent.data('client-validation-error', false);
  81                          $(element).removeClass('is-invalid');
  82                          // If the aria-describedby attribute contains the error container's ID, remove it.
  83                          if (feedbackIndex > -1) {
  84                              describedByIds.splice(feedbackIndex, 1);
  85                          }
  86                          // Check the remaining element IDs in the aria-describedby attribute.
  87                          if (describedByIds.length) {
  88                              // If there's at least one, combine them with a blank space and update the aria-describedby attribute.
  89                              describedBy = describedByIds.join(" ");
  90                              // Put back the new describedby attribute.
  91                              $(element).attr('aria-describedby', describedBy);
  92                          } else {
  93                              // If there's none, remove the aria-describedby attribute.
  94                              $(element).removeAttr('aria-describedby');
  95                          }
  96                          $(element).attr('aria-invalid', false);
  97                          feedback.hide();
  98                      }
  99                  }
 100              });
 101  
 102              var form = element.closest('form');
 103              if (form && !('boostFormErrorsEnhanced' in form.dataset)) {
 104                  form.addEventListener('submit', function() {
 105                      var visibleError = $('.form-control-feedback:visible');
 106                      if (visibleError.length) {
 107                          visibleError[0].focus();
 108                      }
 109                  });
 110                  form.dataset.boostFormErrorsEnhanced = 1;
 111              }
 112          }
 113      };
 114  });