After an hour of searching, I’ve found both parts of my problem, but not a combination. I am working on learning Javascript, but am still struggling after reading the book and taking the live course.
My client has a form that takes in credit card numbers and has two required checkboxes. The card number field can only take two card types that start with a 4 or 5 and a required CVV code.
Requiring the items in the text fields was not a problem, it just required slight modification of the expressions given in class and by the book. I also understand how to require a checked box, but not how to put them together.
This is where I’m currently at after several different attempts. Jquery is linked to as well, though I’m not certain where it’s used. Yes, I know I have unused error and validation lines.
// JavaScript Document
var FormValidation =
{
init: function()
{
var forms = document.getElementsByTagName("form");
for (var i = 0; i < forms.length; i++)
{
$(forms[i]).bind("submit", FormValidation.submitListener);
}
},
rules:
{
required: /./,
masterVisa: /^[4-5]/,
positiveInteger: /^\\d*[1-9]\\d*$/,
positiveOrZeroInteger: /^\\d+$/,
integer: /^-?\\d+$/,
decimal: /^-?\\d+(\\.\\d+)?$/,
email: /^[\\w\\.\\-]+@([\\w\\-]+\\.)+[a-zA-Z]+$/,
telephone: /^(\\+\\d+)?( |\\-)?(\\(?\\d+\\)?)?( |\\-)?(\\d+( |\\-)?)*\\d+$/
// Make sure check boxes are checked
},
errors:
{
required: "Field left blank.",
masterVisa: "Only Visa or Mastercard accepted.",
positiveInteger: "This field may only contain a positive whole number.",
positiveOrZeroInteger: "This field may only contain a non-negative whole number.",
integer: "This field may only contain a whole number.",
decimal: "This field may only contain a number.",
email: "Please enter a valid email address into this field.",
telephone: "Please enter a valid telephone number into this field.",
check: "Please agree to the terms."
},
submitListener: function(event)
{
var fields = this.elements;
for (var i = 0, ii = fields.length; i < ii; i++)
{
var className = fields[i].className;
var classes = className.split(" ");
for (var j = 0, jj = classes.length; j < jj; j++)
{
var oneClass = classes[j];
var rule = FormValidation.rules[oneClass];
if (rule)
{
if (!rule.test(fields[i].value))
{
fields[i].focus();
alert(FormValidation.errors[oneClass]);
event.preventDefault();
return;
}
}
}
}
}
};
FormValidation.init();
var RequiredField =
{
init: function()
{
var requiredField = document.getElementById("terms");
var theForm = requiredField.form;
$(theForm).bind("submit", RequiredField.submitListener);
},
submitListener: function(event)
{
var requiredField = document.getElementById("terms");
if (requiredField.checked == "")
{
requiredField.focus();
alert("Please agree to the terms.");
event.preventDefault();
}
}
};
RequiredField.init();
Related area of form code, getting the form out of a table is on the to do list.
<tr>
<td width="223">
<div align="left">Credit Card Number<br />
(we only accept Mastercard and Visa)</div></td>
<td valign="top" width="300">
<div align="left">
<input name="CC_Number" class="masterVisa" type="text" id="CC_Number" size="35" /></div></td>
</tr>
<tr>
<td width="223">CVV Number<br />
(last 3 digits on back of card)</td>
<td valign="top" width="300"><input type="text" class="required" name="cvv" size="4" maxlength="3" /></td>
</tr>
...
<p><input name="terms" type="checkbox" class="check" id="terms" value="Terms_Conditions" />Yes, I hereby confirm that I have read and agree to the <a title="Terms and Conditions" href="../assets/pdf/tampaterms.pdf" target="_blank">Terms and Conditions</a></p>
<p><input name="no_refund" type="checkbox" class="check" id="terms" value="nonrefundable" /> Yes, I hereby agree to the non-refundable deposit to confirm this reservation.
The credit card number was the main addition to the change. The entire form in all its outdated code ugliness is here: http://www.chromehorserentals.com/rentals/tampares.html