How can I hide or show the error message on validation

Tell us what’s happening:

Right now I see the validation error all the time.

Describe your issue in detail here.

What I try to do is to use aria-live to show or hide a validation error

Your code so far

this is not a challenge from FCC but from a site called front end mentors

do you have a live version of this so we can see the issue?

yes, there is

https://roelofwobbenfrontend.github.io/tip-calculator/roelof.html

You have lots of code, can you create a sample with the minimum amount of code needed to reproduce the issue?

it is good it will be a fsfiddle or something ?

that’s a perfectly valid tool to use

here it is Edit fiddle - JSFiddle - Code Playground
What is want is that someone enters for example a character the error message is shown.
But on some way I cannot invoke the validation it seems

Something like this. But your pattern makes this always invalid so :person_shrugging:

You may want to look up how to use the pattern attribute
For example it doesn’t want the / at the beginning and end
nor you need ^ and $

let money = document.querySelector('#amount');
let divHint = document.querySelector('#usernameHint')


money.addEventListener('input', (e) =>{
    let checked = money.checkValidity();
    console.log(checked);
    if (!checked) {
    	divHint.classList.remove('hidden')
    } else {
    	divHint.classList.add('hidden')
    }

});

Nope. when I try it , i do not see the error message

that code works on my side. Change the code in the jsfiddle, let’s see

you are right.
Have to figure out why it will not work locally

Thanks for the help