How do I write error messages in HTML5?

HTML-CSS
1

in my survey form here: https://codepen.io/GoodNGo/pen/mdWWYqj
I’ve already made certain things required such as the email and age etc, but how do I user story #6? I googled it and found this: HTML5 Form Validation - Showing All Error Messages
but I don’t think thats what im supposed to do.

2

do you mean " * ## 6. If I enter an email that is not formatted correctly, I will see an HTML5 validation error." ? that passes
instead look at the error messages below each failed user story, you have a lot of things to fix

3

In the first error message, it says " * ##
3. I can see a with id=“survey-form.” but I have that written already https://codepen.io/GoodNGo/pen/mdWWYqj beneath the p id.

4

never mind. I was supposed to have a dash in the middle

5

ok I have another problem. for number 13, it says “All your radio-buttons need a name attribute : expected 16 to equal 15” I dont get what the mean, I assumed it meant I skipped a number and went 14-16 without numbering 15, but I did, its the Ariana grande button.

6

ok, let’s seeof fixing syntax errors, maybe it will work

line 11, you have type="name", name is not a valid value for type, I think you mean type="text"

line 17, you have email="email, email is not a valid attribute, maybe you meant type="email"

lines 33, 39, 45, 56, 62, 67 multiple instances of id="checkbox", but ids must be unique

line 51, you have a closing fieldset but a div from line 29 is not yet closed

lines 30, 53, 74, duplicated id="groupA"

lines 31, 54, duplicated id="group-label"

line 64, <for="checkbox" you are probably missing the element name label here, considering also there is a closing label but no opening one
line 69, same as above

line 65, there is a closing div but not matching opening one

line 124, missing = in name"radio-buttons"

there are other issues, similar to these - after you fix the ones I pointed out I suggest you use the Format HTML tool in codepen

You can use this html validator Ready to check - Nu Html Checker

7

just fixed the the first two and will fix the ids later, as for line 51 there are two closing divs above it, and for 65 there is an opening one **<div>** <input id = "checkbox" name="groupB" type="checkbox" value="5"> <label for="checkbox">Punk Rock</label> **</div>**

8

also I’m not missing an = for 124. <label><input type="radio" name="radio-buttons" value="13">Led Zepplin</label>

9

You are passing all the tests but you still have errors in the HTML.

  1. Some attribute values are not enclosed in quotes.

  2. You are missing some closing </div> tags.

  3. All 3 labels for the checkboxes are missing their element type on the opening tag.

  4. You didn’t close the last a element correctly.

I would suggest switching the Syntax Highlighting on Codepen. It will help catch syntax errors.

Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors.

If there are issues you should see tags marked in red. That is the new Syntax Highlighting showing you where the problems are. Press the down arrow to the right of the HTML code box and select “Analyze HTML” to get more information about the errors.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.