'Im creating my survey form in codepen and I did put the "required" attribute but it still saying that there is no validation error
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 hastype="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 thetype="submit"from the first input field.Also I noticed you have specified an input field as such :-
<input ... "required">Solution: Change the
"required"torequired="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 |
