Member Avatar for wewehalim

Hi, I am making a form validator which has some field like "credit card number" and "credit card security code"

I need to make sure that those fields only contain digit, no alphabet and any others characters like "." , "," , etc.
I don't have any idea on how to do this.
Can anyone help?
thanks

Here is my code:

<html>
<head>
<title>JQuery FOrm Test</title>

<style type="text/css">
	body { font: 11px/15px verdana, arial, helvetica, sans-serif; }
	
	.center { text-align:center; font-style:bold; }
	.center_button { display:block;
					 margin-left: auto;
					 margin-right: auto; }
</style>

<script src="http://code.jquery.com/jquery-latest.js"
        type="text/javascript">
</script>

<script type="text/javascript">
function validate()
{
	var compulsory_fields= new Array("credit card number","owner","expiry month","expiry year","security code");
	for (i=0; i< compulsory_fields.length; i++)
	{
	   if (document.getElementById(compulsory_fields[i]).value=="")
	   {
		   alert("Please enter "+compulsory_fields[i]);
		   return false;
	   }
	}
	
	var year = document.getElementById("expiry year").value;
	if (year.length != 4)
	{
		alert("Expiry Year must consist of 4 characters");
		return false;
	}
	
	var security = document.getElementById("security code").value;
	if (security.length != 3)
	{
		alert("Security code must consist of 3 characters");
		return false;
	}
	return true;
}

</script>
</head>
<body>
<form action="demo.php" method="post" onsubmit="return validate()">

<table border="1">
<tr><td colspan="2" class="center">Complete Booking - Stage 2 of 4 - Payment Details</td></tr>
<tr><td style="width:250px;">Credit Card Type<span style="color:red">*</span></td>
	<td><select name="credit card type">
	<option value="Visa">Visa</option>
	<option value="Diners">Diners</option>
	<option value="Mastercard">Mastercard</option>
	<option value="Amex">Amex</option>
	</select></td></tr>
<tr><td>Credit Card Number<span style="color:red">*</span></td><td><input type="text" name="credit card number" id="credit card number"></td></tr>
<tr><td>Owner<span style="color:red">*</span></td><td><input type="text" name="owner" id="owner"></td></tr>
<tr><td>Expiry Month<span style="color:red">*</span></td><td><input type="text" name="expiry month" id="expiry month"></td></tr>
<tr><td>Expiry Year<span style="color:red">*</span></td><td><input type="text" name="expiry year" id="expiry year"></td></tr>
<tr><td>Security Code<span class="asterix" style="color:red">*</span></td><td><input type="text" name="security code" id="security code"></td></tr>
</table>

<table style="width:350px;">
<tr><td><input class="center_button" type="submit" name="submit" value="Stage 3 - Review Bookings and Details"></td></tr>
</table>

</form>
</body>
</html>
  • 3 Contributors
  • 5 Replies
  • 171 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by d5e5
Member Avatar for d5e5

Try adding the following to the validate function.

var ccnum = document.getElementById("credit card number").value;
        var alldig = false;
        alldig = /^\s*\d+\s*$/.test(ccnum); //Consecutive digits, optional leading or trailing spaces        
	if (alldig == false)
	{
		alert("Credit Card Number must consist of numbers only");
		return false;
	}
Member Avatar for fxm

"credit card number"

/^\d{16}$/ Many variations are possible.

Member Avatar for wewehalim

Thanks for the help, it is working.
So, basicly i can use this type of code to any field that required only digit, isn't it?

Member Avatar for d5e5

/^\d{16}$/ Many variations are possible.

Yes, I like that one better than the one I posted. Presumably all VISA credit card numbers have the same length, so you can enforce both the length and all-digit requirement with one regex. You can do the same for 'year', 'month', etc. If you need to eliminate leading or trailing spaces, you can strip them from the string before matching, to keep the regex simple.

Member Avatar for d5e5

Thanks for the help, it is working.
So, basicly i can use this type of code to any field that required only digit, isn't it?

That's right. If you know the exact number of digits required is 4, for example, you can use /^\d{4}$/ . If you want a length of between 3 and 8 consecutive digits you can say /^\d{3, 8}$/ . If you want at least one or more digits (no maximum) you can use /^\d+$/ .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.