Question 292911 in Html Question posted in
Some basic documentation can be found here.

Override HTML email validation error message styling

https://bookmark-landing-page-psi-fawn.vercel.app/

If you go to the bottom of the page there is an email textbox with a submit button. When you submit an invalid email, it gives a custom message ‘Whoops, you entered an invalid email’ etc with custom styling.

I know about the :invalid selector but this isn’t that. How did this person accomplish this?

Right now I get the ‘Please enter a valid email’ message with a little white dialog box. This is the behavior I want to overwrite

(Put an invalid email in the below and hit the submit button, that popup is what I want to prevent and use my own custom div instead)

<form class="cta-form">
<input class="email-textbox" type="email" placeholder="Enter your email address">
<input class="btn-contact" type="submit" value="Contact Us">
</form>
Tags:

2

Answers


  1. 0

    Looking at the page’s Javascript, you can find the handler for the form submission on line 109. This code is what is applying those custom error displays. To prevent the browser’s validation from activating, they set the input to type="text", rather than type="email", but you should instead use the novalidate attribute on the form element, to preserve autofill and other browser functionality.

    Here’s a simple example that checks if the email includes an @ character, and hides and shows error text accordingly.

    const form = document.forms[0]

const emailInput = document.getElementById("email");
const errorDiv = document.getElementById("error");

form.onsubmit = (e) => {
  e.preventDefault()
  if (!emailInput.value.includes("@")) {
    errorDiv.style.display = "block"
  } else {
    errorDiv.style.display = "none"
  }

}
    <form class="cta-form" novalidate>
  <input id="email" class="email-textbox" type="email" placeholder="Enter your email address">
  <input class="btn-contact" type="submit" value="Contact Us">
  <span id="error" style="display:none">Oh no! This email is invalid</span>
</form>
    Login or Signup to reply.
  2. 0

    I think you should use JavaScript to solve this. Change the input type from email to text and use regex to validate the input. When submitting if the email doesn’t match the format then, show the dialog box, you wished to appear.
    This requires a bit more work but this is how it goes.

    Pseudocode:

    -> take input in form of text

    -> give that input an id and access it using JS

    -> create a function that check for email using regex

    -> run the function when the submit button is clicked

    -> if email match the format then submit else show dialog box

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search