Hi! I am totaly new to javascript and would like to know how to do form validations through it.Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<meta name="description" content="" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
jQuery(function($){
// simple jQuery validation script
$('#login').submit(function(){
var valid = true;
var errormsg = 'This field is required!';
var errorcn = 'error';
//match email address
var emailRegex = /'^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$'/;
//select integers only
var intRegex = /[0-9 -()+]+$/;
//match elements that could contain a phone number
var phoneNumber = /[0-9-()+]{3,20}/;
//match date in format yyyy-mm-dd
var dateyyyymmddRegex = '/^[0-9]{4}\\-(0[1-9]|1[012])\\-(0[1-9]|[12][0-9]|3[01])/;';
$('.' + errorcn, this).remove();
$('.required', this).each(function(){
var parent = $(this).parent();
if( $(this).val() == '' ){
var msg = $(this).attr('title');
msg = (msg != '') ? msg : errormsg;
$('<span class="'+ errorcn +'">'+ msg +'</span>')
.appendTo(parent)
.fadeIn('fast')
.click(function(){ $(this).remove(); })
valid = false;
};
});
$('#login_email', this).each(function(){
var parent = $(this).parent();
if( $(this).val() == '' || !this.value.match(emailRegex)){
var msg = $(this).attr('title');
msg = (msg != '') ? msg : errormsg;
$('<span class="'+ errorcn +'">'+ msg +'</span>')
.appendTo(parent)
.fadeIn('fast')
.click(function(){ $(this).remove(); })
valid = false;
};
});
$('.phone', this).each(function(){
var parent = $(this).parent();
if( $(this).val() == '' || !$(this).val().match(phoneNumber) || !this.value.match(intRegex)){
var msg = $(this).attr('title');
msg = (msg != '') ? msg : errormsg;
$('<span class="'+ errorcn +'">'+ msg +'</span>')
.appendTo(parent)
.fadeIn('fast')
.click(function(){ $(this).remove(); })
valid = false;
};
});
$('.date', this).each(function(){
var parent = $(this).parent();
if( $(this).val() == '' || !$(this).val().match(dateyyyymmddRegex)){
var msg = $(this).attr('title');
msg = (msg != '') ? msg : errormsg;
$('<span class="'+ errorcn +'">'+ msg +'</span>')
.appendTo(parent)
.fadeIn('fast')
.click(function(){ $(this).remove(); })
valid = false;
};
});
return valid;
});
})
</script>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<form id="login" method="post" action="">
<div>
<label for="login_username">Username</label>
<input type="text" name="username" id="login_username" class="field required" title="Please provide your username" />
</div>
<div>
<label for="login_password">Password</label>
<input type="password" name="password" id="login_password" class="field required" title="Password is required" />
</div>
<div>
<label for="login_email">Email</label>
<input type="text" name="email" id="login_email" class="field email" title="Email is required.Check format" />
</div>
<div>
<label for="login_phone">Phone No</label>
<input type="text" name="phone" id="login_phone" class="field phone" title="Phone is required.Enter 10 numerics" />
</div>
<div>
<label for="login_date">Date yyyy-mm-dd</label>
<input type="text" name="date" id="login_date" class="field date" title="Date is required.Enter yyyy-mm-dd format" />
</div>
<div class="submit">
<button type="submit">Log in</button>
</div>
</form>
</body>
</html>
As you can see,function works perfect for the required fields.But other fields error messages are still displayed even the values are correct.Can anyone tell me where I am going wrong?