Need Help with HTML5 Validation on my Project

HTML-CSS
1

Hi everyone,
Thanks in advance for your help. I am working on my 2nd project and I am having these errors especially on HTML5 validation errors. I am copying/pasting the portion so you could identify and help me with the part (don’t know how to link the codpen page.
thanks

<div id= "name"> 
      <label for= "name" id="name-label"> * Name
    <input type="text" id="name" name="name" placeholder= "Enter name" class="font" required>
</div>
   </label>
       <div id="email">
         <label for="name" id="email-label" value="Email"> * Email
       <input type="text" id="email"  name="email" placeholder= "Enter a valid email" class="font" required>
   </label>
</div>
  </label>
    <div id= "number"
         <label for= "name" id="name-label" value="Age"> *Age
    <input type="number" id="number" name="number" min="1" max="200" class="font" placeholder= "Age" required/>
  </label>
</div>
1 Like
2

Missing closing angular parenthesis >

3

Thanks ieahleen. I did that but still the errors persist…

4

There are a few errors to fix if you want it to be valid.

<!-- You can only use an id one time, as you need it for the input this div can not also have it -->
<div id= "name"> 
  <label for= "name" id="name-label"> * Name
    <input type="text" id="name" name="name" placeholder= "Enter name" class="font" required>
  </div> <!-- incorrectly closed before label  -->
</label> <!-- incorrectly closed after div  -->
<!-- You can only use an id one time, as you need it for the input this div can not also have it -->
<div id="email">
  <!-- incorrect for= value, should be email. The value attribute should be on the input not the label -->
  <label for="name" id="email-label" value="Email"> * Email
    <input type="text" id="email"  name="email" placeholder= "Enter a valid email" class="font" required>
  </label>
</div>
  </label> <!-- stray closing label tag -->
<!-- You can only use an id one time, as you need it for the input this div can not also have it -->
<div id= "number" <!-- missing closing bracket -->
  <!-- incorrect for= value, should be number. id="name-label" should id="number-label". The value attribute should be on the input not the label -->
  <label for= "name" id="name-label" value="Age"> *Age
    <input type="number" id="number" name="number" min="1" max="200" class="font" placeholder= "Age" required/>
  </label>
</div>

Valid HTML

<div id="name-container">
  <label for="name" id="name-label"> * Name
    <input type="text" id="name" name="name" placeholder= "Enter name" class="font" required>
  </label>
</div>

<div id="email-container">
  <label for="email" id="email-label"> * Email
    <input type="text" id="email" name="email" placeholder= "Enter a valid email" class="font" required>
 </label>
</div>

<div id= "number-container">
  <label for="number" id="number-label"> *Age
    <input type="number" id="number" name="number" min="1" max="200" class="font" placeholder= "Age" required>
  </label>
</div>
5

Thank you lasjorg!
I corrected the tags as follows but the problem is there:

<div id= "person"> 
      <label for="name" id="name-label"> * Name
    <input type="text" id="person" name="name" value= "person" placeholder= "Enter name" class="font" required>
     </label>
  </div>
  <div id="address">
        <label for="email" id="email-label"> * Email
     <input type="text" id="address"  name="email" placeholder= "Enter a valid email" class="font" required>
    </label>
  </div>
  <div id= "amount">
     <label for= "number" id="number-label"> *Age
    <input type="number" id="amount" name="number" min="1" max="200" class="font" placeholder= "Age" required/>
  </label>
</div>

I feel like I am downloading all the quetsions of the project but I have been stuck here since yesterday. I get these alerts:

4. Inside the form element, I am required to enter my name in a field with id=“name”. If I do not enter a name I will see an HTML5 validation error.

. Inside the form element, I am required to enter an email in a field with id=“email”. If I do not enter an email I will see an HTML5 validation error.

If I enter an email that is not formatted correctly, I will see an HTML5 validation error.

Inside the form, I can enter a number in a field with id=“number”.

If I enter non-numbers in the number input, I will see an HTML5 validation error.

If I enter numbers outside the range of the number input, I will see an HTML5 validation error.’

For the name, email, and number input fields, I can see placeholder text that gives me a description or instructions for each field.’

Thank you again!

6

The for values on the labels and the id values on the inputs should be the same. Give the inputs the id values of name, email, and number

7

lasjorg - Thank you so much. All fixed.

8

your <input type=“text” should be type=“email”

9

Thanks Av8r956 - I did that now.

1 Like