What I'd like to accomplish is this:
If a user types in a valid email, display the ( .check
)'ok' sign. If not valid, display nothing(for the time being. I'll put something in later). I have 3 email fields. I'm trying to 'validate' for each one.
<form id="emailsForm" method="POST" action="/account/recommend/">
<div class="prepend">
<p><strong>Emails:</strong></p>
<div>
<span class="added"><p class="check">ok</p></span>
<input type="email" id="email1" class="input-text" onblur="alert(/([A-Z0-9a-z_-][^@])+?@[^$#<>?]+?\.[\w]{2,4}/.test(this.value))">
</div>
<div>
<span class="added"><p class="check">ok</p></span>
<input type="email" id="email2" class="input-text">
</div>
<div>
<span class="added"><p class="check">ok</p></span>
<input type="email" id="email3" class="input-text">
</div>
<button type="submit" class="submit">Send</button>
</div>
</form>
$("form#emailsForm :input").each(function(){
$('input').blur(function() {
var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
if (testEmail.test(this.value)){
$('input').siblings(".check").css('visibility', 'visible');
}
else {
}
});
});
http://jsfiddle.net/RFcaN/23/ What am I doing wrong?
Thanks for your help and suggestions!
First off you need to find the sibling of this
input, so change your selector from $('input')
to $(this)
.
Secondly, .check
is not a sibling of the input. It's a descendant of the sibling.
$(this).siblings(".added").find('.check').css('visibility', 'visible');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.