Maxlength/Minlength Not Working

HTML-CSS
1

Trying to restrict input to numeric only with a min/max of 10 digits. All searches say this should be the correct code. It is restricting to numeric, but won’t cap input at 10 digits.

Line 16

<label id="number-label">Enter Your Phone Number: <input type="number" id="number" placeholder="4808675309" pattern="[0-9]" maxlength="10" minlength="10"></label>

  **Your code so far**

\ file: <!DOCTYPE html>
<html>
<head>
  <title>Survey Form</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>  
</html>
<body>
<h1 id="title">Survey Form</h1>
<p id="description">Please take a moment to fill out our survey so we can get to know you better!</p>
<form id="survey-form">
  <fieldset id="info-field">
  <h3 id="info">Personal Info</h3>
    <label id="name-label">Enter Your Name: <input type="text" id="name" required placeholder="Cris Parks"></label>
    <label id="email-label">Enter Your Email: <input type="email" id="email" required placeholder="crisparks@freecodecamp.org"></label>
    <label id="number-label">Enter Your Phone Number: <input type="number" id="number" placeholder="4808675309" pattern="[0-9]" maxlength="10" minlength="10"></label>
    <label id="home-business">What Type of Number is This? <label id="home">Home<input id="home-phone" type="radio" name="phone-type"></label>
    <label id="business">Business<input id="business-phone" type="radio" name="phone-type"></label>
    </label>
    <label id="gender">How Do You Identify?
      <select name="gender">
          <option value="">(select one)</option>
          <option value="1">Other</option>
          <option value="2">Female</option>
          <option value="2">Male</option>
      </select>
    </label>
  </fieldset>
  <fieldset id="pastimes-field">
    <h3 id="pastime">What Pastimes Do You Enjoy?</h3>
        <label id="hobies" ><input type="checkbox" name="video-games">Video Games</label>
        <input type="checkbox" name="music">Music</label>
        <input type="checkbox" name="hiking">Hiking</label>
        <input type="checkbox" name="beach">The Beach</label>
    </label>
  </fieldset>
  <fieldset id="bio-field">
    <h3 id="tell-us">Tell Us a Little More About Yourself:</h3>
      <label id="bio"><textarea id="bio-field" rows="3" cols="30" placeholder="I like coding on the go..."></textarea>
    </label>
  </fieldset>
  <input id="submit" type="submit" value="Submit" />    
</form>  
</body>
<!DOCTYPE html>
<html>
<head>
  <title>Survey Form</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>  
</html>
<body>
<h1 id="title">Survey Form</h1>
<p id="description">Please take a moment to fill out our survey so we can get to know you better!</p>
<form id="survey-form">
  <fieldset id="info-field">
  <h3 id="info">Personal Info</h3>
    <label id="name-label">Enter Your Name: <input type="text" id="name" required placeholder="Cris Parks"></label>
    <label id="email-label">Enter Your Email: <input type="email" id="email" required placeholder="crisparks@freecodecamp.org"></label>
    <label id="number-label">Enter Your Phone Number: <input type="number" id="number" placeholder="4808675309" pattern="[0-9]" maxlength="10" minlength="10"></label>
    <label id="home-business">What Type of Number is This? <label id="home">Home<input id="home-phone" type="radio" name="phone-type"></label>
    <label id="business">Business<input id="business-phone" type="radio" name="phone-type"></label>
    </label>
    <label id="gender">How Do You Identify?
      <select name="gender">
          <option value="">(select one)</option>
          <option value="1">Other</option>
          <option value="2">Female</option>
          <option value="2">Male</option>
      </select>
    </label>
  </fieldset>
  <fieldset id="pastimes-field">
    <h3 id="pastime">What Pastimes Do You Enjoy?</h3>
        <label id="hobies" ><input type="checkbox" name="video-games">Video Games</label>
        <input type="checkbox" name="music">Music</label>
        <input type="checkbox" name="hiking">Hiking</label>
        <input type="checkbox" name="beach">The Beach</label>
    </label>
  </fieldset>
  <fieldset id="bio-field">
    <h3 id="tell-us">Tell Us a Little More About Yourself:</h3>
      <label id="bio"><textarea id="bio-field" rows="3" cols="30" placeholder="I like coding on the go..."></textarea>
    </label>
  </fieldset>
  <input id="submit" type="submit" value="Submit" />    
</form>  
</body>

\ file: 


  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36

Challenge: Build a Survey Form

Link to the challenge:

2

For the numeric (min-max) , it passed like so:

 <label>
    <label for="number">#number (10-20)</label> <input type="telNo" id="number" name="number" min=10 max=20 placeholder="Enter Your Phone Number:"></label>

But i think if you just take off the quotes in yours it should work.

If not check out:

3

  1. minlength/maxlength doesn’t work for the type="number". You can use type="tel" if it’s for a phone number

  2. The pattern isn’t correct. If you set a min/max I think you can just use pattern="\d*" although I guess you can set an actual pattern like "\d{10}" or something that actually validates the correct format of the phone number in that country.

1 Like
4

You’re absolutely correct. I was doing exactly what the build order instructed. Which is this

Screenshot 2022-05-19 172639

You can set the type to number, and have worthless length attributes. Or fail the first step, by giving it the correct value of tel, and get the lengths to work. But this project is broken and impossible to pass.

How do I notify someone?

5

These are the only three steps I’m not passing.

6

As unintuitive as it sounds, a phone number is a string (of numbers), not a number (numerical value). For example, you can’t remove leading 0s from a phone number without it becoming a different phone number, but leading 0s on a number are nonsensical.

The requirement is for you to have some number input. The example uses it for an input labelled “Age”. You’ll just have to think of something other than a phone number.

2 Likes
7

You’re not looking at the project requirements. I posted a screenshot with the actual steps they require. They specifically want it to have

<input type="number" id="number"...>

with a

<...maxlength="10" minlength="10">

Which is impossible, HTML5 wont do it.

1 Like
8

Where are you getting 10 from? Why have you used maxlength instead of max? Why have you used minlength instead of min?

9

Because it’s a phone number
Screenshot 2022-05-19 175541

I tried both of those and failed. I have tried every iteration possible to get past this. That’s how a 39 yo construction worker that has been coding for about three weeks was able to troubleshoot it. Because literally nothing else works.

10

I think the confusion you have is thinking that the #number input must be a phone number, but the requirements mention nothing of phone numbers. The word “phone” appears zero times in the requirements. You just need to have some numerical input.

For example:

  • What’s your age?
  • How many slices of pizza do you want?
  • What’s your favorite number from 7 to 55?
1 Like
11

wooooooooooow, its not a phone number. I see where I went wrong. I automatically assumed that it was a phone number field. But you’re correct, they want a number dropdown, with

<...min=(set value) max=(set value)>

Thank you for trying to help me. Sorry about my attitude.

12

No, I totally get the confusion, it’s idiomatic English to ask for someone’s “number”. No worries and good luck!

1 Like
13

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