Validation part in Survey form

1

So that I lost my earlier version of Survey form project due to browser unable to connect and followed by page refresh - Codepen.io I have re-started and am stuck with validation part. Of course; I have text/ email/ numbers to validate and I am stuck @Roma with the name validation part.

Found some meaningful code on Youtube but still unable to encash on it due to the original classes in use…and I can’t muck around anymore - enough number of hours wasted and work is lost so…if someone can please guide?

.input-container {
  margin-bottom: 15px;
  max-width: 300px;
}
.input {
  display: block;
  width: 100%;
  padding: 12px;
}

.input-container[data-error].input {
  border-color: #c292432;
  background: #fffafa;
}

.input-container[data-error]::after {
  content= attr(data-error);
}

My code so far:

2

albeit I can’t see your code, the only validation required for the name is that it is a REQUIRED input. So give your name INPUT tag an attribute of REQUIRED.

3

you have given the freeCodeCamp pen

please save your work and share the link to your own pen with your work

4

@Vumbhoni I checked my code; and it appears I’ve mentioned required=required as the attribute to Name/ Email/ Number etc input fields…
My bad; please find my code URL:

I’d like to try and make use of the below logic I came across when validating Name field:

.input-container {
  margin-bottom: 15px;
  max-width: 300px;
}
.input {
  display: block;
  width: 100%;
  padding: 12px;
}

.input-container[data-error].input {
  border-color: #c292432;
  background: #fffafa;
}

.input-container[data-error]::after {
  content= attr(data-error);
}
5

Hi @rajgorakshay,

The issue is that you have given your LABEL tag an ID value of “name”, and your NAME INPUT tag an ID value of “name-label”. The same is true for your email tags.

To link a LABEL to an INPUT, use the FOR attribute on your LABEL and assign it the name the value of the name of the input you want to link it to.

Also, REQUIRED attribute is a boolean. You only need to specify it, not specify and assign.

6

look below the failed user story to see the error:
for example below failed user story " 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." there is written:

input field with id="name" should be a text field

the #name id is given to a label element, so it can’t be a text input. Please, give the #name id to the appropriate element

7

Hi @ilenia

User story 4, says you should have an input element on the form where you are required to input your name, give this input an id value of name.
User story 10 says you should have a label for your name-input element, give your label an ID value of “name-label”.

try this

  <label for="name" id="name-label">Name:</label>
  <input type="text" name="name" id="name" required placeholder="Enter your name" />
8

thank you for your answer, but I know how to solve that. I wasn’t answering to you