labzone
11-21-2002, 05:13 AM
I have been trying to add a Javascript Credit Card Validator to an existing form without success. I already have Javascript checking for valid form fields such as password and email address. Will someone help add a good credit card validator script to my code. I found one located here (http://www.crows.co.uk/Javascript/ccform.htm) but I'm having problems integrating it into my existing code.
My sample form for testing purposes:
<html>
<head>
<script language=JavaScript>
function validate(form1) {
// Make sure that the name field and the password field are not blank
if (form1.name.value.length <=0) {
window.alert("Please enter your name");
form1.name.focus();
return false;
}
if (form1.password1.value == "") {
window.alert("You must enter a password");
form1.password1.focus();
return false;
}
// Make sure that the passwords entered are identical
if (form1.password1.value !=form1.password2.value) {
window.alert("Entered passwords did not match");
form1.password1.focus(); // Moves the input focus
form1.password1.select(); // Highlights the input area
return false;
}
// If an email address is required, include the following
// statements to verify the syntax of the email address
emailAddress = form1.email.value;
if (form1.email.value == "") {
window.alert("Please enter your email address.");
form1.email.focus();
return false;
}
// Make sure the email address does not contain any of the following
// invalid characters: space, slash, colon, comma, and semicolon
invalidChars = " /:,;";
for (i=0; i<invalidChars.length; i++) {
badChar = invalidChars.charAt(i);
if (form1.email.value.indexOf(badChar, 0) > -1) {
window.alert("Invalid characters: " + badChar);
return false;
}
}
// Make sure there is an @ symbol in the email address
atPos = form1.email.value.indexOf("@",1);
if (atPos == -1) {
window.alert("There must be one @ symbol in the email address");
return false;
}
// Make sure there is no more than one @ symbol
if (form1.email.value.indexOf("@", atPos+1) != -1) {
window.alert("You have more than one @ symbol in the email address");
return false;
}
// Make sure there is a period after the @ symbol
periodPos = form1.email.value.indexOf(".", atPos);
if (periodPos == -1) {
window.alert("Email address should have a period after the @ symbol");
return false;
}
if (form1.dropmenu.selectedIndex==0) {
window.alert ( "Please select a credit card." );
return false;
}
if (form1.terms.checked==false) {
window.alert("Please check the terms and conditions");
return false;
}
// Submit the form data to the Web server
return true;
}
</script>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.unnamed1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" action="http://webmaster.com/cgi-bin/secureorder.cgi" method="POST" onSubmit="return validate(form1)">
<table width="598" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="133" height="28" valign="top" class="unnamed1"> User Name</td>
<td width="465" valign="top">
<input type="text" name="name" size="40">
</td>
</tr>
<tr>
<td height="28" class="unnamed1" valign="top">Password</td>
<td valign="top">
<input type="password" name="password1" size="40">
</td>
</tr>
<tr>
<td height="28" class="unnamed1" valign="top">Confirm Password</td>
<td valign="top">
<input type="password" name="password2" size="40">
</td>
</tr>
<tr>
<td height="16" valign="top" class="unnamed1">Email Address</td>
<td valign="top">
<input type="text" name="email" size="40">
</td>
</tr>
<tr>
<td height="98" colspan="2" valign="top"><br>
<span class="unnamed1">
<input type="checkbox" name="terms" value="Yes">
I have read and accept the terms and conditions.<br>
<br>
<input type="submit" value="Submit">
</span></td>
</tr>
</table>
</form>
<script language="JavaScript">
document.form1.name.focus();
</script>
</body>
</html>
My sample form for testing purposes:
<html>
<head>
<script language=JavaScript>
function validate(form1) {
// Make sure that the name field and the password field are not blank
if (form1.name.value.length <=0) {
window.alert("Please enter your name");
form1.name.focus();
return false;
}
if (form1.password1.value == "") {
window.alert("You must enter a password");
form1.password1.focus();
return false;
}
// Make sure that the passwords entered are identical
if (form1.password1.value !=form1.password2.value) {
window.alert("Entered passwords did not match");
form1.password1.focus(); // Moves the input focus
form1.password1.select(); // Highlights the input area
return false;
}
// If an email address is required, include the following
// statements to verify the syntax of the email address
emailAddress = form1.email.value;
if (form1.email.value == "") {
window.alert("Please enter your email address.");
form1.email.focus();
return false;
}
// Make sure the email address does not contain any of the following
// invalid characters: space, slash, colon, comma, and semicolon
invalidChars = " /:,;";
for (i=0; i<invalidChars.length; i++) {
badChar = invalidChars.charAt(i);
if (form1.email.value.indexOf(badChar, 0) > -1) {
window.alert("Invalid characters: " + badChar);
return false;
}
}
// Make sure there is an @ symbol in the email address
atPos = form1.email.value.indexOf("@",1);
if (atPos == -1) {
window.alert("There must be one @ symbol in the email address");
return false;
}
// Make sure there is no more than one @ symbol
if (form1.email.value.indexOf("@", atPos+1) != -1) {
window.alert("You have more than one @ symbol in the email address");
return false;
}
// Make sure there is a period after the @ symbol
periodPos = form1.email.value.indexOf(".", atPos);
if (periodPos == -1) {
window.alert("Email address should have a period after the @ symbol");
return false;
}
if (form1.dropmenu.selectedIndex==0) {
window.alert ( "Please select a credit card." );
return false;
}
if (form1.terms.checked==false) {
window.alert("Please check the terms and conditions");
return false;
}
// Submit the form data to the Web server
return true;
}
</script>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.unnamed1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bolder}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" action="http://webmaster.com/cgi-bin/secureorder.cgi" method="POST" onSubmit="return validate(form1)">
<table width="598" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="133" height="28" valign="top" class="unnamed1"> User Name</td>
<td width="465" valign="top">
<input type="text" name="name" size="40">
</td>
</tr>
<tr>
<td height="28" class="unnamed1" valign="top">Password</td>
<td valign="top">
<input type="password" name="password1" size="40">
</td>
</tr>
<tr>
<td height="28" class="unnamed1" valign="top">Confirm Password</td>
<td valign="top">
<input type="password" name="password2" size="40">
</td>
</tr>
<tr>
<td height="16" valign="top" class="unnamed1">Email Address</td>
<td valign="top">
<input type="text" name="email" size="40">
</td>
</tr>
<tr>
<td height="98" colspan="2" valign="top"><br>
<span class="unnamed1">
<input type="checkbox" name="terms" value="Yes">
I have read and accept the terms and conditions.<br>
<br>
<input type="submit" value="Submit">
</span></td>
</tr>
</table>
</form>
<script language="JavaScript">
document.form1.name.focus();
</script>
</body>
</html>