Form Validation for jscript. This is the requirement. Payment Information Validation Validate the customer’s payment information as follows: Card Type Required that one is selected Name on Card Required field Expiry Date (Month) Required field Expiry Date Valid expiry date to ensure the card being used has not expired Card Number Required field, Valid Card Number
Form Validation for jscript.
This is the requirement.
Payment Information Validation
Validate the customer’s payment information as follows:
|
Card Type |
Required that one is selected |
|
Name on Card |
Required field |
|
Expiry Date (Month) |
Required field |
|
Expiry Date |
Valid expiry date to ensure the card being used has not expired |
|
Card Number |
Required field, Valid Card Number |
NOTE: regarding the expiry date, you MUST use the date object to ensure that your date check is dynamic.
Modulus Check Logic
For this project, we will be taking in 10 digit credit card numbers. Ensure the user entered only 10 numbers. If they pass this check, perform a modulus check to ensure that the user has submitted a valid credit card number.
Note that the checking factors below are the literal checking factors you will use in your solution.
|
Sample Credit Card Number |
9434578423 |
|
Checking Factors |
432765432 |
|
Multiply Checking Factors by Credit Card digits and Sum |
(9 * 4) + (4 * 3) + (3 * 2) + (4 * 7) + (5 * 6) + (7 * 5) + (8 * 4) + (4 * 3) + (2 * 2) = 195 |
|
Divide the Sum by 11 |
195 / 11 = 17, gives a remainder of 8 |
|
Subtract |
11 - 8 = 3 (this is the check digit) |
|
Compare the check digit to the last digit in the credit card number |
9434578423 |
The credit card number is valid when the check digit and the last digit in the credit card number are equal.
The following valid credit card numbers can be used for testing:
1111111118
2222222225
4111313135
2234321326
Note:
The “%” is the mathematical operator used to get the remainder.
Examples:
10 % 5 = 0, there is no remainder
10 % 3 = 1, there is a remainder of 1
heres the html code
<fieldset id="cardInfo">
<legend>Card Info</legend>
<ul>
<li>
<label for="cardname">Name on Card</label>
<input id="cardname" name="cardname" type="text" />
<p class="cardError error" id="cardname_error">* Required field</p>
</li>
<li>
<label for="month">Expiry Date</label>
<select id="month" name="month">
<option>- Month -</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="year" name="year">
</select>
<p class="cardError error" id="month_error">* You must choose a month</p>
<p class="cardError error" id="expiry_error">* Invalid expiry date</p>
</li>
<li>
<label for="cardnumber">Card Number</label>
<input id="cardnumber" name="cardnumber" type="number" />
<p class="cardError error" id="cardnumber_error">* Required field</p>
<p class="cardError error" id="invalidcard_error">* Invalid card number</p>
</li>
</ul>
</fieldset>
</div>
Step by step
Solved in 2 steps
