Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2018
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML validation error

    Im having trouble with User Story #6:" If I enter an email that is not formatted correctly, I will see an HTML5 validation error " in Responsive Web Design Projects - Build a Survey Form. How do I do this??
    Heres the link to my survey - https://codepen.io/bookworm0618/pen/Owywbo

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,217
    Thanks
    4
    Thanked 470 Times in 458 Posts
    In general your entire HTML is gibberish. Not sure exactly what part you're having validation issues with because of that. Oh wait, no...

    Code:
    <input type: "text"
    Well there's your problem. Oh wait, also, there's no such thing as </br>. BR is a "empty" tag, (as in it cannot wrap CDATA, not that it doesn't contain CDATA) which means it does not have a corresponding closing tag. Likewise there's no such thing as </input> so those labels inside it are gibberish.

    But there's tons of issues that would go past the valdiator that are still wrong. This is why "automation" of bug testing isn't the be-all end-all. For example, "for" attribute on a label is supposed to point at a single input's ID. As such for="radio" is gibberish nonsense. You've got endless pointless classes for nothing (once the form has an ID or class the rest really shouldn't need much), pointless / borderline abusive use of the (crappy nobody uses it right) PLACEHOLDER attribute, no structural FIELDSET(s), radio buttons are selections so there's no reason to put them into a list as that's redundant semantics...

    The proper HTML for such a page should likely be more like this:

    Code:
    <form id="survey">
    	<h1>Survey Form</h1>
    	<p>Tell me about yourself</p>
    	<fieldset>
    		<label for="survey_name">Name:</label>
    		<input type="text" id="survey_name" name="name" required>
    		<br>
    		<label for="survey_email">Email:</label>
    	 <input type="email" id="survey_email" name="email" required>
    	 <br>
    		<label for="survey_number">Age:</label>
    		<input type="number" id="survey_number" name="age" min="1" max="120">
    		<br>
    		<label for="survey_food">Favorite Food:</label>
    		<select id="survey_dropdown" name="food">
    			<option value="">Select an option</option>
    			<option value="pizza">Pizza</option>
    			<option value="salad">Salad</option>
    			<option value="fried-rice">Fried Rice</option>
    		</select>
    		<br>
    		<fieldset class="headingSelections">
    			<h2>Waffles or Pancakes?</h2>
    			<label>
    				<input type="radio" name="wafflesOrPancakes" value="1">
    				Waffles
    			</label>
    			<br>
    			<label>
    				<input type="radio" name="wafflesOrPancakes" value="2">
    				Pancakes
    			</label>
    		</fieldset>
    		<fieldset class="headingSelections">
    			<h2>What sport(s) do you play/do? (check all that apply)</h2>
    			<label>
    				<input type="checkbox" name="survey_sports[basketball]" value="1">
    				Basketball
    			</label>
    			<br>
    			<label>
    				<input type="checkbox" name="survey_sports[soccer]" value="2">
    				Soccer
    			</label>
    			<br>
    			<label>
    				<input type="checkbox" name="survey_sports[baseball]" value="3">
    				Baseball/Softball
    			</label>
    			<br>
    			<label>
    				<input type="checkbox" name="survey_sports[badminton]" value="4">
    				Badminton
    			</label>
    			<br>
    			<label>
    				<input type="checkbox" name="survey_sports[football]" value="5">
    				Football
    			</label>
    			<br>
    			<label>
    				<input type="checkbox" name="survey_sports[taekwondo]" value="6">
    				Taekwondo :)
    			</label>
    			<br>
    			<label>
    				<input type="checkbox" name="survey_sports[tv]" value="7">
    				Professional TV watching
    			</label>
    		</fieldset>
    		<hr>
    		<label for="survey_comment">Any Comments or Suggestions?</label>
    		<textarea name="comment" id="survey_comment" rows="8" columns="80"></textarea>
    	</fieldset>
    	<div class="submitsAndHiddens">
    		<button>Submit</button>
    	</div>
    </form>
    FIELDSET exists to mark groups of user-changeable or selectable fields that are related. The H3 should from a semantic standpoint be LEGEND tags, but those are a pain in the *** to style so it's acceptable to use the appropriate depth heading instead. Remember, HTML is about semantics not appearance, so FIELDSET does not mean "draw a border around this" any more than H1..H6 mean "fonts in different weights and sizes" or HR means "draw a line across the screen."

    When a label is wrapping an input/select/textarea, you don't need for/ID's. When it isn't wrapping it, the for attribute MUST be pointing at an ID on the associated input/select/textarea.

    The HR after the last internal fieldset saying "this is not part of the section started by a H2 before it" -- since the comment TEXTAREA clearly is not a sport. The H2 clearly mark the beginning of major subsections of the H1 each with their own labels. Again what they mean, not their default appearance.

    The CSS for which (assuming a reset is in use) would go like this:

    Code:
    #survey {
    	max-width:57em;
    	margin:0 auto;
    	text-align:center;
    	background:#EAEDF2;
    }
    
    #survey h1 {
    	padding:2em 0 1em;
    	font-size:200%;
    }
    
    #survey h2 {
    	font-weight:normal;
    	font-size:100%;
    }
    
    #survey p {
    	padding-bottom:2em;
    }
    
    #survey fieldset {
    	padding:0 2em 0 17.5em;
    	text-align:left;
    }
    
    #survey label,
    #survey h2 {
    	float:left;
    	width:15em;
    	padding-top:0.25em;
    	margin-left:-15.5em;
    	text-align:right;
    }
    
    #survey input,
    #survey select,
    #survey textarea {
    	box-sizing:border-box;
    	width:100%;
    	padding:0.25em 0.5em;
    	margin-bottom:0.25em;
    	border:1px solid #000;
    }
    
    #survey .headingSelections {
    	padding:1em 0;
    }
    
    #survey .headingSelections label {
    	float:none;
    	margin:0;
    }
    
    #survey .headingSelections input,
    #survey .compact {
    	width:auto;
    	max-width:100%;
    }
    
    #survey .submitsAndHiddens {
    	padding:2em 0;
    }
    
    #survey .submitsAndHiddens button {
    	padding:1em 2em;
    	background:#59ACE0;
    	color:#FFF;
    	border:0;
    	border-radius:0.5em;
      background-color: #59ace0;
    }
    Uses the negative margin float trick so that the label/h2 column area remains elastic at 15em in width with adequate padding, and the inputs/selects/textareas scale to the remaining space. This way having used EM's across the entire layout it remains elastic instead of telling users with accessibility needs to f*** off with pixes, we can also make it properly fluid in a way that's more reliable than trying to mix-and-match percentages.

    I'd then enhance it further by giving it a media query to strip off the columns when the window is too small... something around 48em aught to be about right.

    Code:
    @media (max-width:48em) {
    	body {
    		padding:0;
    	}
    	#survey {
    		padding:1em;
    	}
    	#survey h1 {
    		padding:1em 0 0.5em;
    	}
    	#survey fieldset {
    		padding:0;
    	}
    	#survey label,
    	#survey h2 {
    		float:none;
    		display:block;
    		margin:0 0 0.25em;
    		text-align:left;
    	}
    	#survey .headingSelections label {
    		display:inline-block;
    		padding-left:2em;
    	}
    }
    Live demo here:

    Index of /for_others/sherloc987/ - CutCodeDown

    Hope that helps. Go through it, take your time, feel free to ask questions.
    There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies. C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •