¿Hay alguna forma de eliminar el error predeterminado del correo electrónico de tipo de entrada cuando el usuario ingresa la dirección de correo electrónico incorrecta? ya que estoy trabajando en la validación de formularios con una dirección de correo electrónico. Puedo ver el error predeterminado en el correo electrónico de entrada, pero no en mi consola.
<div class="registration-box">
<form id="form-data">
<input
type="email"
placeholder="Email Address"
class="email-id"
id="email-data"
/>
<span class="btn-box"
><input type="submit" class="submit" value="submit" /></span>
</form>
</div>
<div class="error-msg">Please provide a valid email</div>
const formData = document.getElementById("form-data");
const emailAdd = document.querySelector("input[type='email']");
const emailReg = /^[(\w\d\W)+]+@[\w+]+\.[\w+]+$/i;
formData.addEventListener("submit", (e) => {
e.preventDefault();
if (emailReg.test(emailAdd.value)) {
console.log("correct");
} else {
console.log("error");
}
});
Puede lograr esto deshabilitando la autenticación de formulario, cuando lo haga, debe asegurarse de que su autenticación sea a prueba de agua.
Todos sabemos lo fea que es la validación de stock de forma predeterminada, y puede desactivarla agregando novalidate a su <form>
Aquí hay un ejemplo de la validación que muestra al usuario un mensaje de error personalizado si email.checkValidity() devuelve false
let email = document.getElementsByClassName("email-field")[0];
function validate_email() {
if (!email.checkValidity()) {
document.getElementById("error").innerHTML = "E-mail is not correct";
return false;
} else {
document.getElementById("error").innerHTML = "";
return true;
}
}
console.log("email " + email.value + " " + email.checkValidity());
<form onsubmit="return validate_email(this)" novalidate>
<input type="email" placeholder="Email Address" class="email-field" required>
<p id="error" style="color: red;"></p>
<input type="submit" onsubmit="return validate_email(this)">
</form>
Espero que esto haya ayudado, si no fue así, házmelo saber y veré qué puedo hacer para ayudarte más.