Validate backend forms client-side (#4804)

Fixes #4799.

modules/backend/classes/FormField.php

@@ -425,6 +425,15 @@ class FormField
         $result = array_get($this->attributes, $position, []);
         $result = $this->filterAttributes($result, $position);
 
+        // Field is required, so add the "required" attribute
+        if ($position === 'field' && $this->required && (!isset($result['required']) || $result['required'])) {
+            $result['required'] = '';
+        }
+        // The "required" attribute is set and falsy, so unset it
+        elseif ($position === 'field' && isset($result['required']) && !$result['required']) {
+            unset($result['required']);
+        }
+
         return $htmlBuild ? Html::attributes($result) : $result;
     }
 

modules/system/assets/js/framework.js

@@ -30,12 +30,23 @@ if (window.jQuery.request !== undefined) {
         }
 
         /*
-         * Prepare the options and execute the request
+         * Prepare the options
          */
         var $form = options.form ? $(options.form) : $el.closest('form'),
             $triggerEl = !!$form.length ? $form : $el,
             context = { handler: handler, options: options }
 
+        /*
+         * Validate the form client-side
+         */
+        if (typeof document.createElement('input').reportValidity == 'function' && $form && $form[0] && !$form[0].checkValidity()) {
+            $form[0].reportValidity();
+            return false;
+        }
+
+        /*
+         * Execute the request
+         */
         $el.trigger('ajaxSetup', [context])
         var _event = jQuery.Event('oc.beforeRequest')
         $triggerEl.trigger(_event, context)