perform a validation for this Html and correct all the error that exist. <!DOCTY
ID: 3860171 • Letter: P
Question
perform a validation for this Html and correct all the error that exist.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=page-width, initial-scale=1.0">
<title>Happy Flowers - Order</title>
<link rel="stylesheet" href="happyjavascript.css" />
<link href="http://fonts.googleapis.com/css?family=Tangerine" rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<header>
<h1>Happy Flowers
</h1>
</header>
<nav>
<ul>
<li><a href="#">Floral Arrangements</a></li>
<li><a href="#">Seasonal Bouquets</a></li>
<li><a href="#">Live Plants</a></li>
<li><a href="#">Shop by Price</a></li>
</ul>
</nav>
</div>
<article id="text">
<h2>Place an Order</h2>
<div id="errorText"></div>
<form action="results.htm">
<fieldset id="message" class="checks">
<legend>Message</legend>
<ul class="checkbox">
<li>
<input type="checkbox" id="chkCongratulations" name="Congratulations!" value="Congratulations!"><label for="Congratulations">Congratulations!</label></li>
<li>
<input type="checkbox" id="chkHappyBirthdy" name="Happy Birthdy!" value="Happy Birthdy!"><label for="HappyBirthdy">Happy Birthdy!</label></li>
<li>
<input type="checkbox" id="chkHappyAnniversary" name="Happy Anniversary!" value="Happy Anniversary!"><label for="HappyAnniversary">Happy Anniversary!</label></li>
<li>
<input type="checkbox" id="chkILoveyou" name="I Love you!" value="I Love you!"><label for="ILoveyou">I Love you!</label></li>
<li>
<input type="checkbox" id="chkCustommessage" name="Custommessage" value=""><label for="Custommessage">Custom message:</label></li>
</ul>
<textarea placeholder="Enter custom message here (max 250 characters)" id="txtArea"></textarea>
</fieldset>
<fieldset id="billingAddress" class="text">
<legend>Billing Address</legend>
<label for="fname">First Name</label>
<input type="text" id="FName" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
<label for="Staddress">Street Address</label>
<input type="text" id="Staddress" name="Staddress">
<label for="city">City</label>
<input type="text" id="city" name="city">
<label for="State">State</label>
<select id="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="zip">Zip</label>
<input type="text" id="zip" name="zip">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone">
</fieldset>
<fieldset id="deliveryAddress" class="text">
<legend>Delivery Address</legend>
<ul class="checkbox">
<li>
<input type="checkbox" name="Same as billing address" value="" id="deliveyAdd"><label for="fname">Same as billing address</label></li>
</ul>
<br/>
<label for="fname">First Name</label>
<input type="text" id="delfname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="dellname" name="lname">
<label for="Staddress">Street Address</label>
<input type="text" id="delStaddress" name="Staddress">
<label for="City">City</label>
<input type="text" id="delCity" name="City">
<label for="State">State</label>
<select id="delstate">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="zip">Zip</label>
<input type="text" id="delZip" name="zip">
<label for="phone">Phone</label>
<input type="text" id="delPhone" name="phone">
</fieldset>
<fieldset id="deliveryDate" class="checks">
<legend>Delivery Date</legend>
<input type="date" name="Ddate" id="date">
</fieldset>
<fieldset id="paymentInfo" class="text">
<legend>Payment</legend>
<ul class="checkbox">
<li>
<input type="radio" name="Card" id="Visa" value="Visa" ><label for="Visa">Visa</label>
</li>
<li>
<input type="radio" name="Card" id="Master Card" value="Master Card">
<label for="Master Card">Master Card</label></li>
<li>
<input type="radio" name="Card" id="Discover" value="Discover">
<label for="Discover">Discover</label></li>
<li>
<input type="radio" name="Card" id="American Express" value="American Express">
<label for="American Express">American Express</label></li>
</ul>
<label for="CardNumber">Card #</label>
<input type="text" id="CardNumber" name="CardNumber">
<label for="expiry">Expiration</label>
<select name='expireMM' id='expireMM'>
<option value=''>Month</option>
<option value='01'>January</option>
<option value='02'>February</option>
<option value='03'>March</option>
<option value='04'>April</option>
<option value='05'>May</option>
<option value='06'>June</option>
<option value='07'>July</option>
<option value='08'>August</option>
<option value='09'>September</option>
<option value='10'>October</option>
<option value='11'>November</option>
<option value='12'>December</option>
</select>
<select name='expireYY' id='expireYY'>
<option value=''>Year</option>
<option value='17'>2017</option>
<option value='18'>2018</option>
<option value='19'>2019</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />
<label for="#CVV">CVV</label>
<input type="text" id="CVV" name="CVV">
</fieldset>
<fieldset id="createAccount" class="text">
<legend>Create Account</legend>
<p>
To be able to access your purchase history and make changes to your order,
enter a name and password to create an account.
</p>
<label for="Uname">Username</label>
<input type="text" id="Uname" name="Uname">
<label for="Pass">Password</label>
<input type="text" id="Pass" name="Pass">
<label for="Passv">Password (verify)</label>
<input type="text" id="passv" name="passv">
</fieldset>
<div id="buttonContainer">
<input type="submit" value="Place Order" id="orderButton" />
</div>
</form>
</article>
<article class="hide" id="result">
<h2>Your form has been submitted</h2>
<form>
<fieldset class="checks">
<legend>you enter are following data</legend>
<div id="appendfieldset"></div>
</fieldset>
</form>
</article>
<footer>Happy Flowers <span>•</span> Chicago, IL</footer>
<script>
//check the same as billing address function.
function checkedFun() {
if (document.getElementById('deliveyAdd').checked) {
document.getElementById('delfname').value = document.getElementById("FName").value;
document.getElementById('dellname').value = document.getElementById("lname").value;
document.getElementById('delStaddress').value = document.getElementById("Staddress").value;
document.getElementById('delCity').value = document.getElementById("city").value;
document.getElementById('delZip').value = document.getElementById("zip").value;
document.getElementById('delPhone').value = document.getElementById("phone").value;
document.getElementById('delstate').value = document.getElementById("state").value;
}
}
//Submit button click function
function submitFun() {
var text = '';
document.getElementById('text').className = "hide";
document.getElementById('result').className = "show";
if (document.getElementById('chkCongratulations').checked) {
text += "<label>CustomText = " + document.getElementById('chkCongratulations').value + "</label>";
}
if (document.getElementById('chkHappyBirthdy').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyBirthdy').value + "</label>";
}
if (document.getElementById('chkHappyAnniversary').checked) {
text += "<label>CustomText = " + document.getElementById('chkHappyAnniversary').value + "</label>";
}
if (document.getElementById('chkILoveyou').checked) {
text += "<label>CustomText = " + document.getElementById('chkILoveyou').value + "</label>";
}
if (document.getElementById('chkCustommessage').checked) {
text += "<label>CustomText = " + document.getElementById('txtArea').value + "</label>";
}
text += "<label>Billing First Name = " + document.getElementById("FName").value + "</label>";
text += "<label>Billing Last Name = " + document.getElementById("lname").value + "</label>";
text += "<label>Billing Steet Address = " + document.getElementById("Staddress").value + "</label>";
text += "<label>Billing City = " + document.getElementById("city").value + "</label>";
text += "<label>Billing State = " + document.getElementById("state").value + "</label>";
text += "<label>Billing Zip = " + document.getElementById("zip").value + "</label>";
text += "<label>Billing Phone = " + document.getElementById("phone").value + "</label>";
text += "<label>Delivery First Name = " + document.getElementById("FName").value + "</label>";
text += "<label>Delivery Last Name = " + document.getElementById("lname").value + "</label>";
text += "<label>Delivery Steet Address = " + document.getElementById("Staddress").value + "</label>";
text += "<label>Delivery City = " + document.getElementById("city").value + "</label>";
text += "<label>Delivery State = " + document.getElementById("state").value + "</label>";
text += "<label>Delivery Zip = " + document.getElementById("zip").value + "</label>";
text += "<label>Delivery Phone = " + document.getElementById("phone").value + "</label>";
//for delivery date
text += "<label>Delivery Date = " + document.getElementById("date").value + "</label>";
//for payment
var radios = document.getElementsByName('Card');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
text += "<label>payment Type = " + radios[i].value + "</label>";
}
}
text += "<label>CardNumber = " + document.getElementById("CardNumber").value + "</label>";
text += "<label>Exp Month = " + document.getElementById("expireMM").value + "</label>";
text += "<label>Exp Year = " + document.getElementById("expireYY").value + "</label>";
text += "<label>CVV Value = " + document.getElementById("CVV").value + "</label>";
text += "<label>UserName = " + document.getElementById("Uname").value + "</label>";
text += "<label>Password = " + document.getElementById("Pass").value + "</label>";
text += "<label>Password (verify) = " + document.getElementById("passv").value + "</label>";
document.getElementById('appendfieldset').innerHTML = text;
}
</script>
</body>
</html>
Explanation / Answer
Please find the validations as mentioned below:
1. At line 192: Warning: The date input type is not supported in all browsers. Alternative is to use polyfill.
2. At line 201: An ID must not contain whitespace. Attribute ID (id="Master Card") has a space.
3. At line 202: An ID must not contain whitespace. Attribute for (for="Master Card") has a space.
4. At line 207: An ID must not contain whitespace. Attribute ID (id="American Express") has a space.
5. At line 208: An ID must not contain whitespace. Attribute for (for="American Express") has a space.
6. At line 234: Attribute maxlength not allowed on element input at this point.
It is only allowed when the input type is email, password, search, tel, text, or url.
This depends on the Browser and the version being used.
7. At line 33: The for attribute of the label element must refer to a non-hidden form control.
<label for="Congratulations">.
This means the for attribute in a label element has to match the id of an input element in your form.
The id in input tag is chkCongratulations and in the label tag is Congratulations.
Both should be same here.
8. At line 35: The for attribute of the label element must refer to a non-hidden form control.
<label for="HappyBirthdy">
Correct as said above.
9. At line 37, 39, 41, 47, 55, 119, 122, 128, 130, 212, 235, 248:
The for attribute of the label element must refer to a non-hidden form control.
Please make sure the attribute in label tag and input tag are the same.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.