Unable to clear input invalid indication

Ask the community
,
1

Hi, I’m building a form bymyself using seperate input fields.
Most of my input fields have pattern validation (regEx) in it which is sufficient validation for me so no use to need the onCustomValidation function.
The problem is as follows - user inputs data - onChange event is trrrigered → validity of the field is polled (with slight delay) → if TRUE → resetValidityIndication & updateValidityIndication are called - but field still shows the red indication (invalid input)

Field validated type: Phone Number
Pattern Validation:

^0\d([\d]{0,1})([-]{0,1})\d{3}([-]{0,1})\d{4}$

see code below:

export function inpPhoneNo_change(event) {
    setTimeout(() => {
        console.log("REGULAR VALIDATION" + $w("#inpPhoneNo").valid)
 //if ($w("#inpPhoneNo").value.length >= 10) {
 //  console.log("PHNONE > 10")
 if ($w("#inpPhoneNo").valid) {
            $w("#inpPhoneNo").resetValidityIndication()
            $w("#inpPhoneNo").updateValidityIndication()
            console.log("PHONE VALID")
            $w("#txtPhoneErr").hide("fade", fadeOptions)
            detailsValidArr[phone] = true

        } else {
            console.log("PHONE  IN -- VALID")
            $w("#txtPhoneErr").show("fade", fadeOptions)
            detailsValidArr[phone] = false
        }
        detailsBoxValidation(detailsValidArr)
 //}
    }, 100);
}

BTW, already tried to change the input type to text or just Number - same resutls.
Thanks,

2

I don’t quite understand what you’re doing…

If the inpPhoneNo is valid, you resetValidityIndication, but if it’s valid, you shouldn’t need to reset.
And then right after you reset, you updateValidityIndication , but if the field is valid, you’ll just be updating the indication from valid to valid.

What exactly are you trying to accomplish?

I think you will find that the Custom Validations example will be very helpful.

3

Hi Yisrael, thanks for your reply.
My bad. I should have indicated that the reset and update functions were added after the visual cue wasn’t updated even though the input was valid.
I get same behavior with or without these functions. the polling the valid var of the object shows TRUE, but the visual cue is still red.
Infact it’s the same issue as shown below(this is why I added the delay)
https://www.wix.com/corvid/forum/community-discussion/text-field-validation

4

Don’t know how but the code is working now w/ or w/o the reset and update validity indication - I’ve came across this behavior before - it seems that when testing the code in preview it is still working with the code before the change and it takes a few minutes for the code to be “updated” . hope it will be OK
Thanks.

5

The delay introduced in the old thread was only because certain event handlers (eg. onKeypress) need the delay before the input field has been properly updated. However, the idea behind the onInput() event handler is that it triggers when the input field is in fact ready - so no need for a delay when using onInput().