updateValidityIndication() not working

Ask the community
,
1

Just can’t seem to get updateValidityIndication() to work, and scanning the forum it looks like others have been having the same problem.

I have a text input box set in the Editor panel as ‘required’ and with a REGEX. When I run this piece of code the console log shows that isValid is correctly showing true or false according to how the input matches the REGEX. But the Input Box never turns red to indicate an invalid entry (unless I leave the field blank). Anyone know the trick?

let isValid = $w("#inputText").valid;
console.log(isValid);
if (isValid === false){
  $w("#inputText").updateValidityIndication();
}
2

I have used the below for dropdowns so may work on a text box

// Function to set error state
function setErrorState(dropdown) {
    dropdown.style.borderColor = "#FF0000"; // Red border for error
    dropdown.updateValidityIndication(); // Indicate that the field is invalid
}

// Function to reset error state
function resetErrorState(dropdown) {
    dropdown.style.borderColor = ""; // Reset to default border
    dropdown.updateValidityIndication(); // Reset validity indication
}
1 Like
3

Thanks. Tested it on my input text box but it appears that .style.borderColor turns the text box border red or white, while the subsequent updateValidityIndication() doesn’t actually do anything.

I’d expected when <$w(“#inputText”).valid = true> the updateValidityIndication() would leave or restore the text box to its default colors, but when false it would set the text box to its Error state (red border, fill and text by default).

If not, how else do you switch an input box from its Normal to Error state by code?

4

that was just a snippet of code to help give you an idea. here is the code I used to work

function validateRequiredFields() {
    const categoryDropdown = $w("#dropdown20");
    const stateDropdown = $w("#dropdown15");
    const regionDropdown = $w("#dropdown16");

    let isValid = true;

    // Reset previous error states
    resetErrorState(categoryDropdown);
    resetErrorState(stateDropdown);
    resetErrorState(regionDropdown);

    // Validate each required dropdown
    if (!categoryDropdown.value) {
        setErrorState(categoryDropdown);
        isValid = false;
    }

    if (!stateDropdown.value) {
        setErrorState(stateDropdown);
        isValid = false;
    }

    if (!regionDropdown.value) {
        setErrorState(regionDropdown);
        isValid = false;
    }

    if (!isValid) {
        $w('#msg').text = "Please fill in all required fields.";
        $w('#msg').expand();
    }

    return isValid;
}

// Function to set error state
function setErrorState(dropdown) {
    dropdown.style.borderColor = "#FF0000"; // Red border for error
    dropdown.updateValidityIndication(); // Indicate that the field is invalid
}

// Function to reset error state
function resetErrorState(dropdown) {
    dropdown.style.borderColor = ""; // Reset to default border
    dropdown.updateValidityIndication(); // Reset validity indication
}