Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – onkeypress allowing only allowed domains while writing email address

For my xpages/jsf application I have setup for an xe:input control the following validation:

<xp:this.validators>
<xp:validateConstraint
    regex="${application.regex_email}"
    message="please follow the rules">
</xp:validateConstraint>
<xp:validateRequired
    message="follow the rules">
</xp:validateRequired>
</xp:this.validators>

The regular expression I use:

regex_email=^([w-]+(?:.[w-]+)*)@(acme.org|acme.com)

(so I allow only email addresses from acme.org and acme.com domains, case sensitive).

This works fine when sending the data to the server but I want to apply something similar to validation on the client-side.

I guess in the onkeyup event a similar check occurs so only the allowed domains in lowercase characters are allowed, so as soon the user would write ‘john.doe@A’ it would be allowed BUT transformed to lowercase (john.doe@a) and when writing john.doe@s it would starts alerting the user that the domain is not acceptable.

But I do not know how. Can anyone explain how to?

Tags:

3

Answers


  1. 0

    const regex_email = /^([w-]+(?:.[w-]+)*)@(acme.org|acme.com)$/;

    Login or Signup to reply.
  2. 0

    Use the pattern attribute of input. It makes it so the form cannot be submitted until the regex in this field matches (see my example below).

    This is better than a key listener, because even if you try to block certain key strokes, the user can still copy/paste an email address in (unless you block this too, which… do you really want to do this to people?)

    Note: This attribute was first introducted in the HTML 5 specification.

    Form matches "foo" and a digit
<form>
<input pattern="food">
<input type="submit">
</form>
    Login or Signup to reply.
  3. 0

    This will validate while typing

    const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');

// Allowed domains
const allowedDomains = ['acme.org', 'acme.com'];

emailInput.addEventListener('input', () => {
  const emailValue = emailInput.value;
  const atIndex = emailValue.indexOf('@');

  let isAllowed = true;

  // Check if the "@" symbol is present and if so, start validating the domain after it
  if (atIndex > -1) {
    const domainPart = emailValue.slice(atIndex + 1);
    // Check if any of the allowed domains starts with the (partially entered) domain
    isAllowed = allowedDomains.some(domain => domain.startsWith(domainPart));
    // Show error if the domain part does not match any allowed domain
    errorMessage.hidden = isAllowed || domainPart.length === 0;
  } else {
    // Hide error if no "@" symbol is present yet
    errorMessage.hidden = true;
  }
});
    <input type="email" id="email" placeholder="Enter your email" />
<div id="error-message" style="color: red;" hidden>Invalid email domain. Must be @acme.org or @acme.com</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search