I'm trying to validate the input using required and customizing the error message with oninvalid however when I fill in the field I tried to submit without filling, for every character I type it shows the error message, ie the onchange does not change the status of the field.
Would anyone know what this could be?
<input type="text" name="nome" id="nome" placeholder="Nome" required oninvalid="setCustomValidity('Insira o seu nome')" onchange="try{setCustomValidity('')}catch(e){}">
Good face, use Regex validation, it's much easier to put javascript, faster and lighter, goes straight into html.
ex.:
<input type="email" required pattern='\w*@\w*\.\w*\.?\w*'>
a pattern sets a default, and the code inside it is the Regex for validation
Regex basic commands
\w = any letter, number and _ (underline / underline)
\ = defines that the successor character (eg ' \. ') must be itself and no other
? = defines that the previous character may or may not be placed
There are other commands needed but these are the most used and they facilitate a lot, I hope I have helped: D