Javascript functionality not working properly on my regex

Question

I can't seem to figure out where in my code is wrong, if it is my regex or my code in javascript. When I input the correct email format, the alert is still coming when it is supposed to come out only when the email format is wrong.

I am using the toggleClass functionality of javascript for the alerts in an active modal.

$('.email').blur(function() {
  var regex =
    /^(([^<>()[\]\\.,;:\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,}))$/;
  var isEmailCorrect = $(this).val().match(regex);
  $('.modal:visible').find('.popemail').toggleClass('hide', isEmailCorrect);
  $('.sub').prop('disabled', !isEmailCorrect);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Email</label>
<span id="popover-email" class="popemail hide pull-right block-help">
    <i class="fa fa-info-circle text-danger" aria-hidden="true"></i>
    Please use the proper format of an email</span>
<input type="email" class="email form-control" id="email" name="email" placeholder="Email" value="<?php echo $row['email']; ?>">

When an email is placed with proper format there should be no alert to come out, but when wrong format of email is placed then the alert should come out. I used toggle class for the alert, see line #4.

Can you provide a full working example that can be run & used here? — Chris Barr
– Chris Barr, Commented Jun 6, 2019 at 15:07
You've told us the expected result but what's actually happening? — frobinsonj
– frobinsonj, Commented Jun 6, 2019 at 15:09

Chris Barr · Accepted Answer · 2019-06-06 18:40:44Z

3

You are using .match() which will return an array of matched substrings in your regex. This is not a boolean value. Run this example to see:

var regex =/^(([^<>()[\]\\.,;:\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,}))$/;

console.log("[email protected]".match(regex));

What you want instead if yo use .test() which will return a boolean if it matches or not.

var regex =/^(([^<>()[\]\\.,;:\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,}))$/;

console.log(regex.test("[email protected]"));
console.log(regex.test("banana"));

EDIT:

To be clear, this is what your code should be. I've added some debugging console.log calls to help you see what things are. I've changed the HTML a bit just to make this demo work. Click the "Run code snippet" button.

$('.email').blur(function() {
  var regex = /^(([^<>()[\]\\.,;:\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,}))$/;
  
  var isEmailCorrect = regex.test(this.value);
  
  console.log('Email Value:', this.value);
  console.log('Is Email Correct:', isEmailCorrect);
  
  $('.modal:visible').find('.popemail').toggleClass('hide', isEmailCorrect);
  $('.sub').prop('disabled', !isEmailCorrect);
});

.hide{display:none;}
.popover-email{color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="modal">
  <label for="email">Email</label>
  <input type="email" id="email" class="email" name="email" placeholder="Email">
  <span id="popover-email" class="hide popemail">Please use the proper format of an email</span>
</div>

edited Jun 6, 2019 at 18:40

answered Jun 6, 2019 at 15:10

Chris Barr

34.7k28 gold badges105 silver badges157 bronze badges

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

6 Comments

bendeeeh Over a year ago

sir I edited my code using .test but nothing came out

Chris Barr Over a year ago

make sure you are doing regext.test('email') and not 'email'.test(regex) - I always get this mixed up. Refer to the working code examples in my answer here, run them to see the console output.

bendeeeh Over a year ago

Okay thanks it worked but still I cant get the expected output. here is my code var isEmailCorrect = regex.test($(this)); $('.modal:visible').find('.popemail').toggleClass('hide', !isEmailCorrect); $('.sub').prop('disabled', isEmailCorrect);

Chris Barr Over a year ago

You are testing the entire jQuery selector, you need to test the text value inside it. isEmailCorrect = regex.test($(this).val()); or even isEmailCorrect = regex.test(this.value);

Chris Barr Over a year ago

FYI, you can easily debug things by logging things to the console. to find out what you are passing in might not be what you expect. console.log($(this)) would have easily told you that it's the entire HTML element instead of the string value of the element where as console.log($(this).val()) will show you the value you want to test against

|

Emma Marcier · Accepted Answer · 2019-06-06 16:15:38Z

Your original expression works just fine, maybe you might want to trim your inputs before testing it, might pass some spaces that would conflict with start and end anchors, or maybe you are passing some chars that are not allowed:

^(([^<>()[\]\\.,;:\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,}))$

Demo

const regex = /^(([^<>()[\]\\.,;:\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,}))$/gm;
const str = `[email protected]
[email protected]
alice@google_.com
[email protected]_
`;
let m;

while ((m = regex.exec(str)) !== null) {
    // This is necessary to avoid infinite loops with zero-width matches
    if (m.index === regex.lastIndex) {
        regex.lastIndex++;
    }
    
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

RegEx Circuit

jex.im visualizes regular expressions:

dganenco · Accepted Answer · 2019-06-06 16:37:57Z

0

As mentioned by @Chris Barr you should use Regexp#test method instead of String#match. So you have to change only one row in your code:

  var isEmailCorrect = regex.test($(this).val());

After that you have to debug in console your jQuery selectors, because of using your html element with class 'modal' could not be found anymore.

edited Jun 6, 2019 at 16:37

answered Jun 6, 2019 at 16:28

dganenco

1,6161 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

Javascript functionality not working properly on my regex

3 Answers 3

EDIT:

6 Comments

Demo

RegEx Circuit

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

EDIT:

6 Comments

RegEx Circuit

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related