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

Email validation regex not returning true even if valid email ID is provided in javascript

I was trying to use the regex /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.){1,2}[a-zA-Z]{2,}))$/ in my javascript code to validate email input. But the function is not returning true even if the email id is valid. Does anyone help me to understand what’s wrong here? The regex which I am using here is matching the email id. But when I use it in the function it’s not working.

The following is my code

var emailInput = $('[data-val-type=email]');
var submitButton = $('.button.submit-button');

submitButton.attr('disabled', true);

emailInput.keyup(function() {
    var mailid = emailInput.val();
    var filter = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.){1,2}[a-zA-Z]{2,}))$/;

    if (!filter.test(mailid.toLowerCase())) {
        console.log("Email invalid: " + mailid);
        emailInput.focus();
    } else {
        console.log("Email valid: " + mailid);
    }
});

Reproducible example is here JSFiddle

Tags:

2

Answers


  1. 0

    Your code seems to work fine for me. I have copy/pasted it here but made a few small changes:

    • I added HTML so this can be used in a demo
    • I moved the regex to only be created once outside of the keyup event
    • the regex now uses the i flag instead of using emailInput.val().toLowerCase()
    • Now using .on('keyup' instead of .keyup(
    • added an isValid variable to make things easier to understand inside the event code
    • the button is now enabled when the email is valid
    • the keyup event is now triggered upon first load instead of just disabling the button on first load
    var emailInput = $('[data-val-type=email]');
var submitButton = $('.button.submit-button');
var filter = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.){1,2}[a-zA-Z]{2,}))$/i;

emailInput.on('keyup', function() {
    var mailId = emailInput.val()
    var isValid = filter.test(mailId)

    if (!isValid) {
        //why is this here?
        //If someone is typing then this field will already have focus!
        emailInput.focus();
    }
    
    submitButton.attr('disabled', !isValid);
    console.log(isValid + ' - ' + mailId);
});

//Force it to fire once upon loading
emailInput.trigger('keyup');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="email" data-val-type="email" />
<button type="button" class="button submit-button">submit</button>
    Login or Signup to reply.
  2. 0

    Why don’t you simply use form validation with required attribute ?

    const myForm = document.querySelector('#my-form');

myForm.onsubmit = e =>
  {
  e.preventDefault();
  console.clear();
  console.log(`this email is correct ${myForm.eMail.value}`);
  console.log(`you may try an other one (use reset button)`);
  }
    <form id="my-form">
  <input name="eMail" placeholder="Email address" type="email" required>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search