How to check if on input matches a string pattern with jQuery

Question

My goal is to check if an email input field (as a user is typing characters into it), matches a pattern or not. This is my working example so far, but I feel stuck when it gets to the point of actually matching the process "while" typing...

Below is my working example which I'm trying to capitalize on...


   //...

    var $attemail = mtarget.find(".my-email-field"); //INPUT

    function validateEmail(email) {
      var re = /\S+@\S+\.\S+/;
      if (re.test(email) == false) {
        console.log('Email field is not valid');
        //issueFlag.push(noticeEmail);
      }
    }

    function checkEmailOnType() {
      $attemail.on("input", function(){
        var $characters = jQuer(this).val();

        if ($characters.toLowerCase())  {
            //IF MY CHARACTER TYPING IS PASSING OR NOT PASSING 
            //MY validateEmail() FUNCTION ABOVE, HOW DO WE SAY THAT?  
        }
      });
    }

    //...

Use `return re.test(email)` in `validateEmail()` and add it to your `if ($characters.toLowerCase()) {`. Yet I suggest to use it on blur or submit and not on input. I can be annoying to be pointed out the obivous before one is even finished typing. — Lain, Feb 22 '22 at 15:22
I think I get what you are saying but how does that solve my problem in checkEmailOnType()? How do we check character typing against a function? ok,, if its just as easy as simply adding it inside the if, I'll feel like an idiot. — klewis, Feb 22 '22 at 15:25
**How do we check character typing against a function?** by [returning a value](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values) in that function. Yours as it is returns `undefined` which you can just change to return the result of `re.test(email)`. — Lain, Feb 22 '22 at 15:28
As it is right now the *function* `function checkEmailOnType() {` does not really serve any puropose. You can assign the handler well without it. — JavaScript, Feb 22 '22 at 15:31
(Slightly) off topic: while your question is really about checking input pattern, you have specifically mentioned **email validation**. Please see this question and answer: [How can I validate an email address with a regular expression](https://stackoverflow.com/questions/201323/how-can-i-validate-an-email-address-using-a-regular-expression) which includes a 6300 character regex (which is also not 100%). — freedomn-m, Feb 22 '22 at 15:50

score 1 · Accepted Answer · answered Feb 22 '22 at 15:34

Add a return value to your function. Yours as it is returns undefined which you can just change to return the result of re.test(email).

//...

var $attemail = mtarget.find(".my-email-field"); //INPUT

function validateEmail(email) {
  var re = /\S+@\S+\.\S+/;
  return re.test(email)
}

//function checkEmailOnType() {
  $attemail.on("input", function(){
    var $characters = jQuer(this).val();

    if ($characters.toLowerCase())  {
        //IF MY CHARACTER TYPING IS PASSING OR NOT PASSING 
        //MY validateEmail() FUNCTION ABOVE, HOW DO WE SAY THAT?
        if(validateEmail($characters) == false){
            console.log('Email field is not valid')
        }
    }
  });
//}

//...

How to check if on input matches a string pattern with jQuery

1 Answers1