updateValidityIndicator() not updating invalidated text input state

Ask the community
,
1

Hi folks. I am setting a text input’s validity.valid to false in an if/else block. I have confirmed that this is working properly, i.e. the text input validity is correctly set to false. However, when $w ( ‘#hotspotAddressInput’ ). updateValidityIndication () , it is not changing state to show a red border. The text input is correctly indicated as invalid when it is empty, as it is a required input.

The relevant code block:

export async function hotspotAddressInput_input(event) {
 
 try {

 let hotspotAddress = $w('#hotspotAddressInput').value;

 const endpoint = "https://api.helium.io/v1/hotspots/" + hotspotAddress;

 let jsonResponse = await getJSON(endpoint);

 if (!('error' in jsonResponse) && hotspotAddress != '') {

 $w('#hotspotAddressInput').validity.valid = true;
 $w('#hotspotAddressInput').resetValidityIndication();

 let hotspotStatus = jsonResponse.data.status.online;
 let hotspotName = jsonResponse.data.name;

 session.setItem("hotspotAddress", hotspotAddress);
 session.setItem("hotspotStatus", hotspotStatus);
 session.setItem("hotspotName", hotspotName);

 $w('#hotspotNameText').text = hotspotName + ", " + hotspotStatus;

 let fadeOptions = {
 "duration": 500,
 "delay": 0
 };

 $w('#hotspotNameText').show("fade", fadeOptions);
 
 } else {

 session.clear();

 $w('#hotspotAddressInput').validity.valid = false; // setting validity.valid to false
 console.log($w('#hotspotAddressInput').validity.valid)) // correctly logging "false"
 $w('#hotspotAddressInput').updateValidityIndication(); // input still shown as valid despite this expression

 if (hotspotAddress == '') throw "hotspotAddressInput value missing";

 $w('#hotspotNameText').text = jsonResponse.error;

 let fadeOptions = {
 "duration": 500,
 "delay": 0
 };

 $w('#hotspotNameText').show("fade", fadeOptions);

 }
 catch (error) {

 console.warn(error)
 return error;
}

I have tried putting $w(‘#hotspotAddressInput’).updateValidityIndication() in setTimeout() with a small delay with no luck. I have also tried onCustomValidation() but I find it rather unintuitive, and I’m not sure it’s appropriate as I want to invalidate the input based on a getJSON response, not the value of the input.

Any pointers are much appreciated. Thanks in advance!

2

Is this input element set to be required ?

3

Yes it is. Do I need to change this? I still want the input to be invalid if it is empty, or at least have some other code prevent a submit button from being enabled if it is empty.

4

@ryanmorgan12 as far as I know you can get the validity and you cannot set the validity. So it will be falsy as long as the input value is not valid.
As a matter of fact I don’t know what you’re trying to achieve (I really don’t understand what it means to set the validity). Maybe you can elaborate a little bit.

5

@jonatandor35 you can set validity.valid to true or false, the demo site (line 7 and line 11) for onCustomValidation() does this. I’ve emphasised that this is working, i.e. I can correctly validate or invalidate the input. The issue is having the invalidated text input element change to its error state.

$w ( ’ #hotspotAddressInput ’ ). updateValidityIndication () is the only thing not working here.

6

@ryanmorgan12 This is new to me. I can’t find this validity.valid setting in the documentation.
https://www.wix.com/velo/reference/$w/validatablemixin/validity
As you can see:

validity
"Gets a ValidityState object that contains detailed information about the validity states of the element."

If you find a solution, please post it.

7

@jonatandor35 My only workaround is to manually change the appearance of the text input element with code, but that’s pretty janky and I’d love to know what’s going wrong with with $w ( ’ #hotspotAddressInput ’ ). updateValidityIndication () for my own sanity!