How can I hide or show the error message on validation

JavaScript
#1

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

#2

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

#3

yes, there is

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

#4

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

#5

it is good it will be a fsfiddle or something ?

#6

that’s a perfectly valid tool to use

#7

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

#8

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')
    }

});
#9

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

#10

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

#11

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

Thanks for the help