'Im creating my survey form in codepen and I did put the "required" attribute but it still saying that there is no validation error

This is my template

I can't pass the challenge because it says "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"

I have tried putting it exactly like another survey form I found but it still did not work.

<div>
  <header class="header">
   <h1 id="title">Airplane Magazine</h1>
     <p id="description">This will get you signed to our airplane    news and update magazine</p> 
  </header>
  </div>
     <form id="survey-form">
       <div class="forms">
         <label id="name" for="name">Name</label>
         <input 
             type="text"
             name="name"
             id="name"
             class="form-control"
             placeholder="Enter Your Name"
             type="submit"
             required
                ></input>
       </div>
       <div class="forms">
         <label id="email" for="email">Email</label>
         <input 
              type="email"
              id="email"
              class="form-control"
              name="email"
              placeholder="Enter your Email"
              required
                ></input>
       </div>
       <div class="forms">
         <label id="number" for="number">Age<span class="clue">(optional)</span></label>
         <input 
               type="number"
               name="age"
               id="number"
               min="16"
               max="99"
               class="form-control"
               placeholder="age"
                ></input>
               
        </div>
         
    
      </form>  
  
  


Solution 1:[1]

  • Your form has no submit button. The only input with type="submit" also has type="text" and so there is no way to submit the form.

    Solution: Just add a submit button (<input type="submit">) to the end of your form, before the closing tag, and remove the type="submit" from the first input field.

  • Also I noticed you have specified an input field as such :- <input ... "required">

    Solution: Change the "required" to required="true" in order for it to work properly.

I did exactly that in the CodePen you provided and it works. An error is shown if I try to leave the input fields blank.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AlphaHowl