Email validation via jQuery

Navigation
0

I'm trying to do a validation in an email field, I even "can" do, but it's not 100% functional, I'd like to cancel the button with the disabled attribute until the user places a valid email , I get the button to cancel, but when I type the correct email it does not come back.

Input and button 

<div>
    <input value="Digite seu e-mail" onclick="this.value=='Digite seu e-mail'?this.value='':''" onblur="this.value==''?this.value='Digite seu e-mail':''" type="text" name="email" id="newsletter" title="Assine nossa newsletter" class="input-text required-entry validate-email input-news validatex"/>
</div>
<button type="submit" class="button btn-inline news-button" id="validatex"><span>Enviar</span></button>

Function 

function validateEmail(email) {
    var re = /^(([^<>()[\]\.,;:\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,}))$/;
    return re.test(email);
}

function validatex() {
  if (validateEmail(email)) {
    $j('#validatex').removeAttr('disabled');
    $j("#newsletter").css("background", "none");
    return true;
  } else {  
    $j("#newsletter").css("background", "url(../../skin/frontend/ultimo/default/images/icon-erro.png) no-repeat 330px #fff"); 
    $j('#validatex').attr('disabled', 'disabled'); 
    return false;
  }

}

$j(".validatex").bind("blur", validatex);
$j("#validatex").bind("click", validatex);
    
asked by anonymous 06.10.2017 / 21:58

1 answer

1

You need to use keyuo event in the input and go checking the content of the input.

The code example below is working link 

<input type="email" >
<button>Enviar</button>

Your JavaScript. Each time user type is validated the value that is in the input, once this content becomes a valid email we remove the attributes of disabled. 

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

$('document').ready(function(){
  $('button').attr('disabled','disabled');
  $('input').keyup(function(){
    if (isEmail($(this).val())){
      console.log('email valido')
      $('button').removeAttr('disabled');
    }else{
       $('button').attr('disabled','disabled');
    }
  })
})
    
06.10.2017 / 22:17
CURLOPT_HEADERFUNCTION - Return of cookies How to clean this Deleted from git