search

reduxframework / redux-framework

Redux is a simple, truly extensible options framework for WordPress themes and plugins!
http://redux.io
Other
1.74k stars 583 forks source link

Custom validation error messages for 'ace_editor' fields are not removed once field passes validation #3888

Closed sjregan closed 2 years ago

sjregan commented 2 years ago

Site Health Report

### wp-core ###

version: 6.0
site_language: en_AU
user_language: en_AU
timezone: +00:00
permalink: /%year%/%monthnum%/%day%/%postname%/
https_status: false
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: production
user_count: 4
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /Users/example/Sites/eval5
wordpress_size: 50.40 MB (52846747 bytes)
uploads_path: /Users/example/Sites/eval5/wp-content/uploads
uploads_size: 63.00 B (63 bytes)
themes_path: /Users/example/Sites/eval5/wp-content/themes
themes_size: 11.53 MB (12092582 bytes)
plugins_path: /Users/example/Sites/eval5/wp-content/plugins
plugins_size: 35.60 MB (37333107 bytes)
database_size: 3.23 MB (3391488 bytes)
total_size: 100.77 MB (105663987 bytes)

### wp-active-theme ###

name: Twenty Twenty-Two (twentytwentytwo)
version: 1.2
author: the WordPress team
author_website: https://wordpress.org/
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, block-templates, widgets-block-editor, wp-block-styles, editor-style
theme_path: /Users/example/Sites/eval5/wp-content/themes/twentytwentytwo
auto_update: Disabled

### wp-themes-inactive (2) ###

Twenty Twenty: version: 2.0, author: the WordPress team, Auto-updates disabled
Twenty Twenty-One: version: 1.6, author: the WordPress team, Auto-updates disabled

### wp-plugins-active (1) ###

Template Library and Redux Framework: version: 4.3.15, author: Extendify, Auto-updates disabled

### wp-plugins-inactive (3) ###

Akismet Anti-Spam: version: 4.2.4, author: Automattic, Auto-updates disabled
BuddyPress: version: 10.3.0, author: The BuddyPress Community, Auto-updates disabled
Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Auto-updates disabled

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1686
imagemagick_version: ImageMagick 6.9.6-2 Q16 x86_64 2021-09-30 http://www.imagemagick.org
imagick_version: 3.4.4
file_uploads: File uploads is turned off
post_max_size: 8M
upload_max_filesize: 32M
max_effective_size: 8 MB
max_file_uploads: 20
imagick_limits: 
    imagick::RESOURCETYPE_AREA: 80 GB
    imagick::RESOURCETYPE_DISK: 1.844674407371E+19
    imagick::RESOURCETYPE_FILE: 1920
    imagick::RESOURCETYPE_MAP: 80 GB
    imagick::RESOURCETYPE_MEMORY: 40 GB
    imagick::RESOURCETYPE_THREAD: 1
imagemagick_file_formats: 3FR, A, AAI, AI, ART, ARW, AVI, AVS, B, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, C, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G, G3, G4, GIF, GIF87, GRADIENT, GRAY, GROUP4, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K, K25, KDC, LABEL, M, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, O, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, R, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCREENSHOT, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIFF, VIPS, VST, WBMP, WEBP, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, Y, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP
ghostscript_version: not available

### wp-server ###

server_architecture: Darwin 21.4.0 x86_64
httpd_software: nginx/1.19.2
php_version: 7.4.21 64bit
php_sapi: cgi-fcgi
max_input_variables: 50000
time_limit: 30
memory_limit: 128M
admin_memory_limit: 256M
max_input_time: 60
upload_max_filesize: 32M
php_post_max_size: 8M
curl_version: 7.68.0 OpenSSL/1.0.2u
suhosin: false
imagick_availability: true
pretty_permalinks: true

### wp-database ###

extension: mysqli
server_version: 5.7.34
client_version: mysqlnd 7.4.21
max_allowed_packet: 134217728
max_connections: 151

### wp-constants ###

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /Users/example/Sites/eval5/wp-content
WP_PLUGIN_DIR: /Users/example/Sites/eval5/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Undefined
DB_CHARSET: utf8mb4
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
0: Writable

### redux-framework ###

version: 4.3.15
installation: plugin
data directory: /Users/example/Sites/eval5/wp-content/plugins/redux-framework/redux-core/
browser: 
    Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15
    Browser: Safari
    Version: 15.4
    Platform: Apple

### redux-instance-redux_demo ###

opt_name: redux_demo
global_variable: redux_demo
dev_mode: true
ajax_save: true
page_slug: redux_demo_options
page_permissions: manage_options
menu_type: menu
page_parent: themes.php
compiler: true
output: true
output_tag: true
templates_path: undefined
extensions: 
    Accordion: 1.0.1
    Customizer: 4.0.0
    Datetime: 2.0.0
    Import Export: 4.0.0
    Metaboxes: 4.0.0
    Multi Media: 4.3.15
    Options Object: 4.0.0
    Repeater: 4.3.7
    Search: 3.4.5
    Shortcodes: 4.3.5

Steps to reproduce

  1. Add a field of type 'ace_editor' with custom validation using the validate_callback option.
  2. Write custom validation function.
  3. Open redux settings and enter a value into field that will cause validation to fail. Click 'Save Changes'
  4. Enter a value into field that will pass validation. Click 'Save Changes'

Expected Behavior

The validation error message to be removed.

Actual Behavior

The validation error message remains on screen even though the field has passed validation and been saved.

Any Error Details (PHP/JavaScript)

Note: This is a Javascript bug, not PHP.

I believe it is because the Javascript does not handle the additional <div class="ace-wrapper"> element when using a field type of ace_editor.

Modifications to sample config:

array(
    'id'       => 'opt-textarea-no-html',
    'type'     => 'ace_editor',
    'title'    => esc_html__( 'Textarea Option - No HTML Validated', 'your-textdomain-here' ),
    'subtitle' => esc_html__( 'All HTML will be stripped', 'your-textdomain-here' ),
    'desc'     => esc_html__( 'This is the description field, again good for additional info.', 'your-textdomain-here' ),
    'validate_callback' => 'validate_json',
    'default'  => '{"opt-slider-label":"1", "opt-slider-text":"10"}',
),

Validation function:

function validate_json( $field, $value, $existing_value ) {
    $json = json_decode( $value );

    if ( json_last_error() === JSON_ERROR_NONE ) {
        $field['msg'] = '';

        return array(
            'value' => trim( $value ),
            'error' => $field
        );
    }

    $field['msg'] = esc_html__( 'You must enter valid JSON.', 'text-domain' );

    return array(
        'error' => $field,
        'value' => trim( $existing_value ),
    );
}
kprovance commented 2 years ago

It's because you're not using a validation that interfaces with the core validation functions, and why the JS isn't handling it.

sjregan commented 2 years ago

The validation system works fine if the field type is not 'ace_editor'.

Regardless, I have updated the ticket to remove the issue being related to custom validation. Here is some sample code:

Redux::set_section( $opt_name, array(
    'title'  => esc_html__( 'Basic Field', 'your-textdomain-here' ),
    'id'     => 'basic',
    'desc'   => esc_html__( 'Basic field with no subsections.', 'your-textdomain-here' ),
    'icon'   => 'el el-home',
    'fields' => array(
        array(
            'id'       => 'opt-text',
            'type'     => 'ace_editor',
            'title'    => esc_html__( 'Example Text', 'your-textdomain-here' ),
            'desc'     => esc_html__( 'Example description.', 'your-textdomain-here' ),
            'subtitle' => esc_html__( 'Example subtitle.', 'your-textdomain-here' ),
            'hint'     => array(
                'content' => 'This is a <b>hint</b> tool-tip for the text field.<br/><br/>Add any HTML based text you like here.',
            ),
            'validate' => 'email',
            'default'  => 'notanemail',
        )
    )
) );

And a video showing the issue.

https://user-images.githubusercontent.com/1580170/177735206-38d58c18-ab90-41f3-882e-e2aa45ef8ce7.mov

kprovance commented 2 years ago

I'll try to take a look at it later this week.

kprovance commented 2 years ago

That should do it.

sjregan commented 2 years ago

Great job, thank you.