is there any way to remove the default error from input type email when the user enters the incorrect email address? as I'm working on form validation with an email address. i can see default error from on input email but not on my console.
<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");
}
});
You can accomplish this by disabling the form authentication, when you do this tho you need to make sure that your authentication is water proof.
We all know how ugly the stock validation is by default, and you can disable this by adding novalidate to your <form>
Here is a example of the validation that shows the user a custom error message if email.checkValidity() returns 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>Hope this helped, if it didn't please let me know, and I will see what I can do to further help you.