Regex validation not returning proper results upon function call

Question

I have a component using a regex expression to check for email format validity. I have this attached as an onBlur function for the input that also runs on load as part of the React hook useEffect as soon as the page loads. The function is supposed to check for an empty field and fire an error message prompting the user to enter an email address or select opt out. If the email entered is the wrong format a separate error should fire. On load everything runs as expected with the initial error firing for an empty input. The issue occurs after a user enters the input field and leaves. The function fires and sets the error prompting a user to enter a valid email even when the input field is empty. I've swapped things out and initially tried to get around this by setting the first check as if(value === undefined || '' but so far I'm getting the same behavior. Any suggestions?

Functions for validation

function validateEmail(value) {
  const errors = { hasError: false }
  if (value === undefined || '') {
    errors.email = 'Enter a valid email address or select Email Opt Out'
    errors.hasError = true
    return errors
  }

  if (!/\S+@\S+\.\S+/.test(value)) {
    errors.email = 'Enter a valid email address'
    errors.hasError = true
    return errors
  }
  return errors
}

Ben Walton · Accepted Answer · 2019-06-19 16:24:15Z

1

Can you just check to see if your string is empty before calling the validation method?

  function onBlur(e) {
    var stringValue = e.target.value || '';

    if(stringValue !== '') checkIfCustomerEmailIsValid(e.target.value)
  }

answered Jun 19, 2019 at 16:24

Ben Walton

4534 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Over a year ago

Unfortunately not because it's still only checking for a single space, and I need to be able to validate any number of white spaces within the input

Josh · Accepted Answer · 2019-06-19 18:49:32Z

I was able to run a conditional regex expression to check if the value had either spaces or no value at all, and that did the trick! Code below for anyone's future reference

Solution

function validateEmail(value) {
  const errors = { hasError: false }
  if (/\s/g.test(value) || !value) {
    errors.email = 'Enter a valid email address or select Email Opt Out'
    errors.hasError = true
    return errors
  }

  if (!/\S+@\S+\.\S+/.test(value)) {
    errors.email = 'Enter a valid email address'
    errors.hasError = true
    return errors
  }

  return errors
}

Original

function validateEmail(value) {
  const errors = { hasError: false }
  if (value === undefined || '') {
    errors.email = 'Enter a valid email address or select Email Opt Out'
    errors.hasError = true
    return errors
  }

  if (!/\S+@\S+\.\S+/.test(value)) {
    errors.email = 'Enter a valid email address'
    errors.hasError = true
    return errors
  }
  return errors
}

Collectives™ on Stack Overflow

Regex validation not returning proper results upon function call

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related