jquery validating email not working with ^ character

Question

I'm trying to validate an email following the explanations on this page Email validation using jQuery, but I don't know why I get an error if I put this character ^ at the beginning of my expression:

function checkEmail(){
    var email = this.innerHTML;
    var emailPattern = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;

    if (!emailPattern.test(email)){
        alert("Invalid email address.");
    }
    else {
        alert("Valid email address.");
    }
}

If I use the other one (without ^ and +$) it works perfectly:

var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;

Just to understand it, What is wrong with my first expression?

Here is a fiddle that demonstrate my problem: http://jsfiddle.net/5en4cxy9/

Thanks,

your program runs fine - check the jsfiddle here : http://jsfiddle.net/2wbpy2mf/9/ — user1428716, Dec 28 '14 at 11:46
Your validation worked for me nicely. Have you ensured of the value of `this.innerHTML` is indeed what you want to validate, try outputting its value via `console.log(this.innerHTML)` or alert(this.innerHTML) and check if it works for you. — avenet, Dec 28 '14 at 11:53
@ user1428716 and @avenet I just updated my question with a fiddle container containing a code like mine . If I alert my this.innerHTML it shows me the correct value . It is very strange because if I try the fiddle by @ user1428716 the other expression works. — mgrdiez, Dec 28 '14 at 13:21

score 0 · Accepted Answer · answered Dec 28 '14 at 13:44

Your fiddle includes a leading space before the email address. This leading space is included in .text() or .innerHTML, so the anchored regex (/^.../) fails.

Trim leading/trailing spaces first:

var email = this.innerHTML.trim();
var emailPattern = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;

if (!emailPattern.test(email)){
    alert("Invalid email address.");
}
else {
    alert("Valid email address.");
}

$(document).ready(function() {
  $("div").blur(function() {
    // alert("This input field has lost its focus.");
    var email = $("div#email").text().trim();

    var emailPattern = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z]{2,4})+$/;

    if (!emailPattern.test(email)) {
      alert("Invalid email address.");
      $(this).css('color', 'red');
    } else {
      alert("Valid email address.");
    }


  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr class="tabel_header">
      <th width="10%" align="center"><strong> Email:</strong>
      </th>
      <th width="7%" align="center"><strong> Username:</strong>
      </th>
    </tr>
    <tr data-row-no="1" height="35">
      <td>
        <div id="email" style="width: 100%; height: 100%;" contenteditable="true"> admin@dracus.co</div>
      </td>
      <td>
        <div style="width: 100%; height: 100%;" contenteditable="true">Admin</div>
      </td>
    </tr>
  </tbody>
</table>

jquery validating email not working with ^ character

1 Answers1