is there any way to remove the default error from input type email when user enter the incorrect email address?

Vineet Kujur 0
Viewed 20

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");
  }
});
javascript
1 Answers

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.

FUZIION0
Related