I want to make a custom error message, but not using the alert of Javascript , but the API of form validation.
Hoping that when the person does not fill input a cloud comes out asking to fill the element in question, what I have read says that I have to use setCustomValidity but it does not show me the result.
In this link is the code:
The input , select and textarea have the property validity , which is an object of type ValidityState
An example of how to use setCustomValidity could be the following:
var select = document.getElementById('select');
select.addEventListener('change', function(evt) {
this.setCustomValidity('');
});
select.addEventListener('invalid', function(evt) {
// Required
if (this.validity.valueMissing) {
this.setCustomValidity('Por favor seleccione el nivel!');
}
});
var input = document.getElementById('input');
input.addEventListener('input', function(evt) {
this.setCustomValidity('');
});
input.addEventListener('invalid', function(evt) {
// Required
if (this.validity.valueMissing) {
this.setCustomValidity('Por favor complete el nombre!');
}
});<form>
<input type="text" id="input" required/>
<select id="select" required>
<option value=""></option>
<option value="administrador">Administrador</option>
<option value="limitada">Limitada</option>
</select>
<button type="submit">Validar</button>
</form> For that you can use the required attribute
Work with type input: text, search, url, tel, email, password, date pickers, number, checkbox, radio , and file
To personalize the message, you could use the title tag
For example with this data it would be:
<form>
<label for="txtnombre">Nombre</label>
<input type="text" id="txtnombre" name="txtnombre" required title="Debes rellenar el campo Nombre">
<button type="submit">Validar</button>
</form>You could do the validation from the HTML, for example:
<label for="ctauser1">Cuenta de usuario 1</label>
<input type="text" id="ctauser1" name="ctauser1" required pattern="[A-Za-z]" title="Sólo se acepta caracteres">
Maybe you're looking for this.Sweet with the link.