NooBskie NooBskie - 5 months ago 13
jQuery Question

blur function not being first

I am using regex to disable registering with a apple email

if (str.match('(@me.com)') || str.match('(@icloud.com)') || str.match('(@mac.com)'))


The code is working fine if I run it with the browser console but I cant get it to work initially, Ive wrapped it in a
$(document).ready(function () { .. }
as well the blur function just never seems to fire. Here is the code below as well as CodePen

Html



<div class="content">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" role="form">
<div class="warning email-warning" style="display:none;">A non-Apple email address is required due to issues with our mail server. Sorry about that!</div>
<input type="text" name="email" placeholder="" value="" id="Email"/>
<input type="password" name="password" placeholder="Password" value="" />
<input style="font-size: 1.5rem;" type="submit" value="Login" class="btn btn-default" />
<div class="already">Don't have an account? <a href="/index.php?route=account/register">Register</a></div>
<a class="block text-center" href="/index.php?route=account/forgotten">Forgot your password?</a>
</form>
</div>


JS



function emailValidate(){
var str = $('#Email').val();
$('#Email').blur(function() {
if (str.match('(@me.com)') || str.match('(@icloud.com)') || str.match('(@mac.com)')) {
$('.email-warning').css('display', 'block')
}
});
}
emailValidate()

Answer

You need to re-assign the value using val() to variable str inside blur event callback.

function emailValidate(){

  $('#Email').blur(function() {
    var str = $(this).val();
    if (str.match('(@me.com)') || str.match('(@icloud.com)') || str.match('(@mac.com)')) {
      $('.email-warning').css('display', 'block')
    }
    alert(str)
  });
}
emailValidate()