Javascript onkeydown function not working properly

Question

I wanted to check the entered email address properly with a Javascript function like this:

function validation() {
    let form = document.getElementById('form')
    let email = document.getElementById('email').value
    let text = document.getElementById('text')
    let pattern = "/^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/"

    if (email.match(pattern)) {
        form.classList.add('valid')
        form.classList.remove('invalid')
        text.innerHTML = "Valid"
        text.style.color = '#00ff00'
    } else {
        form.classList.remove('valid')
        form.classList.add('invalid')
        text.innerHTML = "Not valid"
        text.style.color = '#ff0000'
    }

    if (email == '') {
        form.classList.remove('valid')
        form.classList.remove('invalid')
        text.innerHTML = ""
        text.style.color = '#00ff00'
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <input type="email" name="email" class="form-control" id="email" placeholder="Enter your email" onkeydown="validation()">
    <span id="text"></span>
  </div>
</form>

Now it calls the validation() function properly and shows Not Valid message if user has entered an email address which is not validated.

But the problem comes from when the user tries to correct his email address and enters a valid email, but the message Not Valid still appears on page because of last incorrect email address.

So how can I properly hide this message when user enters valid email the 2nd time?

Why don't you use `` which will validate the value automatically? — Andy, Jun 13 '22 at 11:34
You should either use a string literal (enclosed between quotes) containing the regular expression, or a regex literal which is enclosed between slashes. Don't mix them up by adding the slashes to the string literal, because then your regex wont do what you expect it to. — Ivar, Jun 13 '22 at 11:43

score 0 · Answer 1 · answered Jun 13 '22 at 11:34

0

Try this code,

let pattern = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

// true if okay otherwise false.
pattern.test(email);

Thanks.

answered Jun 13 '22 at 11:34

Jaydeep Mor

1,690
3
21
39

score 0 · Answer 2 · answered Jun 13 '22 at 11:36

If you are looking for standard email validation, then message not valid still appears because it is not valid according to your pattern. See more email regular patterns in different questions.

function validation() {
    let email = document.getElementById('email').value
    let yourPattern = "/^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/"
    let anotherPattern = /\S+@\S+\.\S+/;
    
    console.log("is yourPattern valid?", !!email.match(yourPattern));
    console.log("is anotherPattern valid?", !!email.match(anotherPattern));

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
    <input type="email" name="email" class="form-control" id="email" placeholder="Enter your email" onkeydown="validation()">
</form>

score 0 · Answer 3 · answered Jun 13 '22 at 11:53

Maybe use HTML5's <input type="email" required> for the validation. If you need to do any further tests in JS you can, but this is a nicer way of doing it, and you get built-in messages.

A further note on validation however.

const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);

function handleSubmit(e) {
  e.preventDefault();
  const data = new FormData(form);
  console.log(data.get('email'));
}

input[type="email"]:not(:placeholder-shown):invalid { border-color: red; }

<form>
  <input name="email" placeholder="Add an email" type="email" required>
  <button type="submit">Submit</button>
</form>

Javascript onkeydown function not working properly

3 Answers3