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

Question

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

sjregan opened this issue 2 years ago · comments

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

Add a field of type 'ace_editor' with custom validation using the validate_callback option.
Write custom validation function.
Open redux settings and enter a value into field that will cause validation to fail. Click 'Save Changes'
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 ),
    );
}

Kevin Provance · Answer 1 · Thu Jul 07 2022 16:47:07 GMT+0800 (China Standard Time)

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 · Answer 2 · Thu Jul 07 2022 17:01:59 GMT+0800 (China Standard Time)

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.

Screen.Recording.2022-07-07.at.7.01.20.pm.mov

Kevin Provance · Answer 3 · Thu Jul 07 2022 17:07:04 GMT+0800 (China Standard Time)

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

Kevin Provance · Answer 4 · Fri Jul 08 2022 04:11:48 GMT+0800 (China Standard Time)

That should do it.

sjregan · Answer 5 · Fri Jul 08 2022 09:06:57 GMT+0800 (China Standard Time)

Great job, thank you.