All javascript should be in an external file On submit: 1. Validate that all req
ID: 3589335 • Letter: A
Question
All javascript should be in an external file
On submit:
1. Validate that all required fields are included
Once a users finishes an input field:
2. Validate a valid Name (only letters)
3. Valid email (includes a @)
4. Password requires at least a capital letter and number.
5. Valid CC #. If a visa or mastercard, 16 digits. If AMEX: 15 digits
6. Valid exp. date (not in past, formatted correctly)
If any of these fail, alert the user
Bonus points if you style the form with an external CSS file
<html>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="password">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<section>
<p> <button type="submit">Validate the payment</button> </p>
</section>
</form>
</html>
Explanation / Answer
<html>
<script src="validateform.js"></script>
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Contact information</h2>
<fieldset>
<legend>Title</legend>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Mister
</label>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms.">
Miss
</label>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="password">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Payment information</h2>
<p>
<label for="card">
<span>Card type:</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Card number:</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Expiration date:</span>
<strong><abbr title="required">*</abbr></strong>
<em>formatted as mm/yy</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<section>
<p> <button type="submit">Validate the payment</button> </p>
</section>
</form>
</html>
validateform.js:
/**
*
*
*/
function validateMandatoryFields(){
var name = document.getElementById('name').value;
if( ""==name){
alert('Name field is mandatory.')
}
var mail = document.getElementById('mail').value;
if( ""==mail){
alert('Email field is mandatory.')
}
var pwd = document.getElementById('pwd').value;
if( ""==pwd){
alert('Password field is mandatory.')
}
var number = document.getElementById('number').value;
if( ""==number){
alert('Card number field is mandatory.')
}
var date = document.getElementById('date').value;
if( ""==date){
alert('Expiration Date field is mandatory.')
}
}
function validateName(){
var name = document.getElementById('name').value;
var re = new RegExp("^[A-Z]*[a-z]*$");
if (re.test(name)) {
} else {
alert('Invalid name entered.')
}
}
function validateEmail(){
var name = document.getElementById('mail').value;
var re = new RegExp("[^@]@{1}[^@]$");
if (re.test(name)) {
} else {
alert('Invalid Email entered.')
}
}
function validatePwd(){
var pwd = document.getElementById('pwd').value;
var re = new RegExp("^(.*)((([A-Z]{1,})([0-9]{1,}))||(([0-9]{1,})([A-Z]{1,})))$");
if (re.test(pwd)) {
} else {
alert('Invalid password entered.')
}
}
function validatecc(){
var number = document.getElementById('number').value;
var card = document.getElementById('card').value;
var re = new RegExp("^[0-9]{16}$");
if("amex"==card){
re = new RegExp("^[0-9]{15}$");
}
if (re.test(number)) {
} else {
alert('Invalid Card number entered.')
}
}
function validateDate(){
var date = document.getElementById('date').value;
var re = new RegExp("^(0[1-9]|1[0-2])/d{2}$");
if (re.test(date)) {
} else {
alert('Invalid Expiry Date entered.')
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.