Hi I have a question about HTML input patter.

I tried to restrict any special character, but I got this error.

new:1 Pattern attribute value ^[A-Za-z0-9]{3, 16}$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^[A-Za-z0-9]{3, 16}$/: Incomplete quantifier

It is so weird why I got this error because the pattern is almost the same as patterns for other inputs. Only err msg for the question doesn't appear but others do.

Thanks for your valuable time in advance.

.quizForm {
  padding-top: 30px;
  .quizFormInputText, .quizFormInputSelect {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    label {
      font-size: $fzSmall;
      margin-bottom: 5px;
    }
    input {
      border: 1px solid rgb(200, 200, 200);
      font-size: $fzSSmall;
      padding: 10px;
      border-radius: 5px;
      &:invalid[focused="true"] ~ span {
        display: block;
      }
    }
    select {
      border: 1px solid rgb(200, 200, 200);
      font-size: $fzSSmall;
      padding: 10px;
      border-radius: 5px;
    }
    .errMsg {
      margin-top: 5px;
      color: red;
      font-size: $fzSSmall;
      padding: 5px 15px;
      background: rgb(255, 230, 230);
      display: none;
    }
  }
  button {
    padding: 10px 18px;
    border-radius: 5px;
    border: none;
    width: 100%;
    background: white;
    font-size: $fzSmall;
    cursor: pointer;
    transition: .3s;
    background: $colorGoNextQuizBtnHover;
    &.disableToClick {
      pointer-events: none;
      opacity: .5;
    }
  }
}

  const inputs = [
    {
      id: 1,
      name: 'question',
      type: 'text',
      placeholder: 'Is protein powder white happy magical snow??',
      err: 'this is a error message',
      pattern: '^[A-Za-z0-9]{3, 16}$',
      label: 'Question',
      required: true,
    },
    {
      id: 2,
      name: 'answer1',
      type: 'text',
      placeholder: 'No',
      err: 'this is a error message',
      label: 'Answer 1',
      required: true,
      pattern: '^[0-9]{1}$',
    },
    {
      id: 3,
      name: 'answer2',
      type: 'text',
      placeholder: 'Yes',
      err: 'this is a error message',
      label: 'Answer 2',
      required: true,
      pattern: '^[0-9]{1}$',
    },
    {
      id: 4,
      name: 'answer3',
      type: 'text',
      placeholder: 'Maybe',
      err: 'this is a error message',
      label: 'Answer 3',
      pattern: '^[0-9]{1}$',
    },
    {
      id: 5,
      name: 'answer4',
      type: 'text',
      placeholder: 'Tqm',
      err: 'this is a error message',
      label: 'Answer 4',
      pattern: '^[0-9]{1}$',
    },
    {
      id: 6,
      name: 'correctAnswer',
      type: 'number',
      placeholder: 1,
      err: 'this is a error message',
      label: 'Correct Answer',
      required: true,
    },
    {
      id: 7,
      name: 'category',
      // err: "this is a error message",
      label: 'Category',
    },
  ];

CodePudding user response：

Remove the space in {3, 16}

According to Regex101.com: https://regex101.com/r/EY2Vqp/1:

{3, 16} matches the characters {3, 16} literally (case sensitive)

Use ^[A-Za-z0-9]{3,16}$ instead.

See developer.Mozilla.org and W3Schools for more info.

CodePudding user response：

Extra space between 3 and 16. See the link posted in the other answer (copying here: https://regex101.com/r/EY2Vqp/1)

{3, 16} matches the characters {3, 16} literally (case sensitive)

That is, it will attempt to match {, 3, , 1, 6, and } individually.

What you're looking for is {3,16} (no space) to match the previous token ([A-Za-z0-9]) 3 through 16 times (inclusive).