Live email validation by jQuery is not working, I can not find the bug
here is the code, I can not find the bug. The background images are coming from a local directory, the same with jQuery library. I have tested the paths and they are all fine. Somehow something is not working and I can not find out.
<html>
<head>
<script type="text/javascript" src="/myform/js/jquery.js"></script>
<script type="text/javascript">
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
return pattern.test(emailAddress);
}
$(document).ready(function() {
$("#validate").keyup(function(){
var email = $("#validate").val();
if(email != 0)
{
if(isValidEmailAddress(email))
{
$("#validEmail").css({ "background-image": "url('/myform/logos/validyes.png')" });
} else {
$("#validEmail").css({ "background-image": "url('/myform/logos/validno.png')" });
}
} else {
$("#validEmail").css({ "background-image": "none" });
}
});
});
</script>
<style&开发者_StackOverflowgt;
#validEmail
{
margin-top: 4px;
margin-left: 9px;
position: absolute;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<div><input type=”email” id=”validate” width=”50”><span id=”validEmail”></span></div>
</body>
</html>
Try replacing
if(email != 0)
with
if(email.length != 0)
Change:
<div><input type=”email” id=”validate” width=”50”><span id=”validEmail”></span></div>
to:
<div><input type="email" id="validate" width="50"><span id="validEmail"></span></div>
I tested it and it is okay.
I made ur code working.Basically ur Input tag was not correct. your input tag was
<input type=”email” id=”validate” width=”50”><span id=”validEmail”></span>
i changed it to this
<input type="email" id="validate" width="50" /><span id="validEmail" ></span>
Here's is the working code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
return pattern.test(emailAddress);
}
$(document).ready(function() {
$("#validate").keyup(function(){
var email = $("#validate").val();
if(email != 0)
{
if(isValidEmailAddress(email))
{
alert('Valid Email');
// $("#validEmail").css({ "background-image": "url('/myform/logos/validyes.png')" });
} else {
alert('InValid Email');
// $("#validEmail").css({ "background-image": "url('/myform/logos/validno.png')" });
}
} else {
$("#validEmail").css({ "background-image": "none" });
}
});
});
</script>
<style>
#validEmail
{
margin-top: 4px;
margin-left: 9px;
position: absolute;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<div><input type="email" id="validate" width="50"><span id="validEmail" /></span></div>
</body>
</html>
and one moe thing.dont check email validation on keyup event.Guess checking in blur event will be more appropriate.
Change the goofy quotes, to real quotes, add swap out your condition to email.length > 0, and then you might as well shorten your code. Too much stuff repeated.
function isValidEmailAddress(emailAddress) {
return /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/.test(emailAddress);
}
$(function() {
$("#validate").keyup(function() {
var bg = "none";
var email = $("#validate").val();
if(email.length > 0) {
bg = isValidEmailAddress(email)
? "url('/myform/logos/validyes.png')"
: "url('/myform/logos/validno.png')";
}
$("#validEmail").css("background-image", bg);
});
});
加载中,请稍侯......
精彩评论