Survey form test error

I dont know what is happening, when i run the test it says that i am missing this one

    1. 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.*
      But my code have it! please help
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Videogames Survey</title>   
    <script src=""></script>
    <div class="wrapper">
            <h1 id="title">How much do you like VIDEOGAMES?</h1>
            <p id="description">Let us know a little bit about your taste in the best games platforms that exist. We want to know you!</p>
            <form id="survey-form">
                <label for="name" id="name-label">Name</label>
                <input type="text" id="name" placeholder="Type your name here" required>
                <label for="email" id="email-label">Email</label>
                <input type="email" id="email" placeholder="Write your email here" requiered>
                <label for="age" id="number-label">Age</label>
                <input type="number" id="number" placeholder="Age" min="10" max="40" required>
                <label for="dropdown">What console's type do you prefer?</label>
                <select id="dropdown" required>
                    <option value="desktop">Desktop</option>
                    <option value="handheld">Handheld</option>
                    <option value="hybrid">Hybrid</option>

                <p>Which are the brands of your consoles?</p>
                <div class="flex-options"> 
                    <input type="checkbox" id="gameconsole1" name="console" value="sony">
                    <label for="gameconsole1">Sony</label>
                    <input type="checkbox" id="gameconsole2" name="console" value="nintendo"> 
                    <label for="gameconsole2">Nintendo</label>
                    <input type="checkbox" id="gameconsole3" name="console" value="microsoft"> 
                    <label for="gameconsole3">Microsoft</label>
                    <input type="checkbox" id="gameconsole4"name="console" value="other"> 
                    <label for="gameconsole4">Other</label>

                <p>What's the best saga?</p>
                <div class="flex-options">
                    <input type="radio" id="consoleSaga1" name="saga" value="mario">
                    <label for="consoleSaga1">Mario Bros</label><br>
                    <input type="radio" id="consoleSaga2" name="saga" value="zelda">
                    <label for="consoleSaga2">Zelda</label><br>
                    <input type="radio" id="consoleSaga3" name="saga" value="pokemon">
                    <label for="consoleSaga3">Pokemon</label><br>
                <label for="textarea">Tell us what do you like the most about videogames!</label>
                <textarea id="textarea" cols="60" rows="10"placeholder="Write whats on your mind"></textarea>

                <input type="submit" id="submit" value="Send my ideas!">

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;

body {
    font-family: "Quicksand", sans-serif;
    background: url("");
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px; 

.wrapper {
    background: rgba(0,0,0,0.9);
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,1);
    width: 50%;

#title, #description{
    text-align: center;

main {
    margin-top: 10px;

#survey-form {
    flex-direction: column;

form label, form p {
    margin: 8px 0;

#survey-form input {
    font-family: "Quicksand", sans-serif;
    border-radius: 5px;
    display: block;

#dropdown {
    padding: 10px;
    font-family: "Quicksand", sans-serif;
    width: 20ch;
    border-radius: 5px;

.flex-options {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 60%;

#textarea {
    font-family: "Quicksand", sans-serif;
    padding: 5px;
    outline: none;
    border-radius: 5px;
    font-size: 15px;
    resize: none;

#submit {
    margin:10px auto;
    margin-left: 0;
    border:2px solid #000;
    font-weight: bold;

input[type="submit"]:hover {
    background: rgba(161, 149, 149, 0.719);

@media (max-width:1000px) {

    .wrapper {
        width: 90%;
    .flex-options {
        flex-direction: column;
        align-items: flex-start;

@media (max-width:700px) {

    .wrapper {
        width: 90%;

    #title {
        font-size: 1.5em;


In your code, the “email” input has the requiered attribute instead of required. It’s a mistake. Good luck!

@rsarayb, someone has given you the answer but in the future when a test fails be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The full text of the failing message is;

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.
Email input field should be required : expected false to be truthy
AssertionError: Email input field should be required : expected false to be truthy

Hope that helps

Yes, thank u, i realized that just a few minutes after I posted this. Thank u anyways!!:heart:

Yes thank you, actually i realized what was the problem after reading a post in google very similar to what you are telling me♥

1 Like

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