custom/pattern validation bug on Editor X

Ask the community
,
1

Hi,

While trying to create my custom form, I noticed the following bug:
When there’s a pattern validation (either set by UI or set by code), the input’s indicator updates on blur (green if true, red if false) as it should, but the .valid property doesn’t.

The .valid property updates only after focusing on the input again and blurring out of it the second time, which is real problematic and unexpected behavior.

I attached a simple site to demonstrate the the problem:
https://hurryappnet.editorx.io/website-10

here’s what’s happening on the website I attached:

the first text input (inputTextPattern) has a pattern validation set to : [1]*$ (only a-z is allowed).
when entering 1 and clicking out of the input to blur , the indicator turns red (false),
but the .valid property which is printed to the console is still “true”. after clicking on the input (to focus) and clicking out of it (to blur) again, the .valid property is now updated to true, even though it was true the first time and nothing changed. Same thing happens when listening to onChange (instead of onBlur) - it only updates after doing it twice.

the second input (inputTextCustom) has custom validation set using code to : /[2]*$/ (same regex), and the same problem occurs. it takes 2 times to focus and blur for the .valid property value to update, even though the indicator updates on the first blur.

code:


const inputTextValidationRegex = /^[a-z]*$/;

$w.onReady(function () {

 // UI "add pattern validation" onBlur code
    $w("#inputTextPattern").onBlur(function(event) {
        console.log("****message from UI pattern validation onChange function****")
        console.log("#inputTextPattern valid state: " + $w("#inputTextPattern").valid);
    })

 // Custom validation code
    $w("#inputTextCustom").onCustomValidation( (value, reject) => {
 if (value && !inputTextValidationRegex.test(value.toLowerCase())) {
            reject("Bio minimum length is 30 characters");
        }
        console.log("****message from custom validation function****")
        console.log("#inputTextCustom valid state: " + $w("#inputTextCustom").valid);
    });

});

please open the developer console on the link I attached in order to see the problem clearly.

Let me know if you successfully recreated the bug,
thanks

  1. a-z ↩︎

  2. a-z ↩︎

1 Like