Changeset 12090

Timestamp:

09/26/2022 10:23:13 PM (3 years ago)

Author:

coffee2code

Message:

Photo Directory, Uploads: Rework photo submission handler to eliminate use of jQuery Validation (as provided through FU).

• Disable jQuery Validation of any field
• Natively report on required fields submitted without value
• Add JS photoShowFileErrors() to aggregate what will be multiple checks on file input value
• Pass error class name from PHP

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory

Files:

• assets/js/submit.js (modified) (6 diffs)
• inc/uploads.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/assets/js/submit.js

@@ -1 @@
-function photoSubmitLoaded() {
+/**
+ * Initializes things related to the photo upload form.
+ */
+function photoSubmitInit() {
 
     // Remove query parameters added by Frontend Uploader.
@@ -29 +32 @@
         // Add custom validation for upload file size.
         photo_upload_field.addEventListener( 'change', e => {
-            photoShowFileSizeError( photo_upload_field );
+            photoShowFileErrors( photo_upload_field );
         } );
     }
 
-    // Customize jQuery Validator, if still in use.
+    // Disable jQuery Validation, if still in use.
     if ( window.jQuery && window.jQuery.validator ) {
-        // Customize error message for invalid file mimetype.
-        jQuery.validator.messages.accept = PhotoDir.err_invalid_mimetype;
-    }
+        jQuery( photo_upload_form ).validate().settings.ignore = "*";
+    }
+
+    // Show/remove error when any form field value is changed.
+    photoGetInputFields( photo_upload_form ).forEach( (input, i) => {
+        input.addEventListener( 'change', e => {
+            photoRemoveFieldError( e.target );
+        } );
+    } );
 
     // Check validity of form fields on submission.
     photo_upload_form.addEventListener( 'submit', e => {
-        photoShowFileSizeError( photo_upload_field );
+        e.preventDefault();
+
+        const photo_upload_form = e.target;
+        const photo_upload_input = document.getElementById( 'ug_photo' );
+
+        // Clear any server notices from a previous submit.
+        document.querySelector( '.ugc-notice' )?.remove();
+
+        // Disable submit button.
+        photoSetSubmitButtonDisabled( photo_upload_form, true );
+
+        // Show errors for fields that aren't the file input.
+        photoShowFieldErrors( photo_upload_form );
+
+        // Show errors for file input field.
+        photoShowFileErrors( photo_upload_input );
+
+        // Scroll top of form into view.
+        document.getElementById( 'wporg-photo-upload' ).scrollIntoView( true );
+
         if ( photo_upload_form.checkValidity() ) {
-            photo_upload_submit.disabled = true;
+            photo_upload_form.submit();
         }
+
+        return false;
     } );
 
+}
+
+/**
+ * Returns the input fields of interest for generic validation.
+ *
+ * Fields that have custom validation should be listed here as exclusions.
+ *
+ * @param {HTMLElement} form - The form.
+ * @returns {HTMLElement[]} Array of input fields.
+ */
+function photoGetInputFields( form ) {
+    return form.querySelectorAll( 'input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="file"])');
+}
+
+/**
+ * Sets the 'disabled' attribute for the submit button of a form.
+ *
+ * @param {HTMLElement} form - The form element.
+ * @param {Boolean} state - True if the button should be disabled, else false.
+ */
+function photoSetSubmitButtonDisabled( form, state ) {
+    const submitButton = form.querySelector('input[type="submit"]');
+
+    submitButton.disabled = !!state;
+}
+
+/**
+ * Shows errors for invalid input fields and remove previously reported errors
+ * for valid input fields.
+ *
+ * Does not handle input that are:
+ * - hidden
+ * - buttons
+ * - file
+ *
+ * @param {HTMLElement} form - A form.
+ */
+function photoShowFieldErrors( form ) {
+    photoGetInputFields( form ).forEach( (input, i) => {
+        photoShowFieldError( input );
+    } );
+}
+
+/**
+ * Removes an error message for the given input.
+ *
+ * @param {HTMLElement} field - An input field.
+ */
+function photoRemoveFieldError( field ) {
+    field.parentNode.querySelectorAll( '.' + PhotoDir.error_class ).forEach( errorEl => errorEl.remove() );
+    field.parentNode.querySelectorAll( '.processing' ).forEach( errorEl => errorEl.remove() );
+}
+
+/**
+ * Shows the error if the input field is invalid, or removes a previously
+ * reported error if the input field is valid.
+ *
+ * @param {HTMLElement} field - An input field.
+ * @returns {String} Error message, if any.
+ */
+function photoShowFieldError( field ) {
+    photoRemoveFieldError( field );
+
+    let errorMessage = field.validationMessage;
+    const cssClass = PhotoDir.error_class;
+
+    if ( ! errorMessage ) {
+        return '';
+    }
+
+    // Set custom error messages.
+    if ( field.validity.valueMissing ) {
+        errorMessage = PhotoDir.err_field_required;
+    }
+
+    errorEl = document.createElement( 'span' );
+    errorEl.setAttribute( 'class', cssClass );
+    errorEl.innerHTML = errorMessage;
+    field.insertAdjacentElement( 'afterend', errorEl );
+
+    return '';
+}
+
+/**
+ * Validates a file upload against multiple criteria.
+ *
+ * @param {HTMLElement} field - The HTML file input field element.
+ * @return {Boolean} True if an error was encountered, else false.
+ */
+async function photoCheckFileValidations( field ) {
+    let error = false;
+
+    // Check if no file chosen.
+    if ( ! error ) {
+        error = field.validity.valueMissing;
+    }
+
+    // Check for file size error.
+    if ( ! error ) {
+        error = photoCheckFileSize( field );
+    }
+
+    return error;
 }
 
@@ -57 +190 @@
  * existing custom validity message is cleared.
  *
- * @param {Object} field - The HTML file input field object.
+ * @param {HTMLElement} field - The HTML file input field element.
+ * @return {Boolean} True if file size is invalid, else false.
  */
 function photoCheckFileSize( field ) {
@@ -68 +202 @@
         const file_size = files[0].size;
 
-        // Note: If changing the error message for either case, ensure the "// Don't show error message..."
-        // regex in `photoShowFileSizeError()` still matches them both.
         if ( file_size >= MAX_SIZE ) {
             field.setCustomValidity( PhotoDir.err_file_too_large );
-            return;
+            return true;
         } else if ( file_size <= MIN_SIZE ) {
             field.setCustomValidity( PhotoDir.err_file_too_small );
-            return;
+            return true;
         }
     }
@@ -81 +213 @@
     // No custom constraint violation.
     field.setCustomValidity('');
+    return false;
+}
+
+/**
+ * Shows error messages for the file upload input.
+ *
+ * @param {HTMLElement} field - The HTML file input field element.
+ */
+function photoShowFileErrors( field ) {
+    // Checks custom file input validation. A custom validity error message gets
+    // set on the field if a validation fails.
+    photoCheckFileValidations( field );
+    photoShowFileError( field );
 }
 
@@ -86 +231 @@
  * Handles the display of the error message for the file upload input.
  *
- * If the file input field has a file selected, it is checked to see if it is
- * too large or too small. An appropriate error message is shown in either case.
- * If no file is selected, or the file is of sufficient size, then no error is
- * shown and any existing error for the field is cleared.
- *
- * This pseudo-mimics and also works around the jQuery Validation handling that
- * doesn't play well with custom error reporting like this.
- *
- * @param {Object} field - The HTML file input field object.
- */
-function photoShowFileSizeError( field ) {
-    // Check field for file size validation errors.
-    photoCheckFileSize( field );
-
+ * @param {HTMLElement} field - The HTML file input field element.
+ * @return {boolean} True if no error was shown, false if error was shown.
+ */
+function photoShowFileError( field ) {
     const errorMessage = field.validationMessage;
-    const errorId = `${field.id}-error`;
-    let errorEl = document.getElementById( errorId );
-
-    // Don't show error message for any other error.
-    if ( ! errorMessage || ! field.validity.customError || ! / MB\.$/.test( errorMessage ) ) {
-        errorEl?.remove();
-        return;
-    }
-
-    if ( ! errorEl ) {
-        errorEl = document.createElement( 'label' );
-        field.after( errorEl );
-    }
-
-    errorEl.setAttribute( 'id', errorId );
-    errorEl.setAttribute( 'class', 'custom-error' );
-    errorEl.setAttribute( 'for', field.id );
-    errorEl.removeAttribute( 'style' );
-    errorEl.innerHTML = errorMessage;
+
+    // Remove any existing error message.
+    photoRemoveFieldError( field );
+
+    // Return if no legitimate custom error to report.
+    if ( ! errorMessage ) {
+        return;
+    }
+
+    photoShowFieldError( field );
 }
 
 document.addEventListener( 'DOMContentLoaded', () => {
-    photoSubmitLoaded();
+    photoSubmitInit();
 } );

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/inc/uploads.php

@@ -251 +251 @@
                 'PhotoDir',
                 [
+                    'error_class'           => 'error',
+
+                    // Field required.
+                    'err_field_required'    => __( 'This field is required.', 'wporg-photos' ),
+
                     // File extension.
                     'err_invalid_mimetype' => __( 'Please select a JPEG image.', 'wporg-photos' ),