HTML pattern [A-Za-z] says please match the requested format when i entire name like "john&quot-CodePudding

<div >
  <label for="idname" >Name</label>
  <input type="text" placeholder="Name" id="idname" pattern="[A-Za-z]" required>
</div>

Firefox screenshot

CodePudding user response：

So since I've given the 'required' tag, I must issue a minimum number of inputs in the pattern attribute, so the correct pattern tag would be:

pattern="[A-Za-z]{1,20}"

CodePudding user response：

The only problem you have with your current code is that you specified that the pattern must be only one character; this can be verified using the :valid pseudo-class:

::placeholder {
  font-style: italic;
  color: hsl(0 10% 10%);
}

input:invalid {
  background-color: hsl(0 100% 80% / 0.5);
}

input:valid {
  background-color: lime;
}

<div >
  <label for="idname" >Name</label>
  <input type="text" placeholder="Name" id="idname" pattern="[A-Za-z]" required>
</div>

To correct this, you simply have to add the option to have multiple characters as follows (explanations are offered in the <details> elements within the demo):

:root {
  --color-invalid: hsl(0 100% 80% / 0.5);
  --color-valid: hsl(120deg 61% 50% / 0.5);
}

::placeholder {
  font-style: italic;
  color: hsl(0 10% 10%);
}

div {
  border: 1px solid #000;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  inline-size: clamp(20em, 50vw, 900px);
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.25em;
}

label {
  font-weight: 400;
  transition: font-weight 0.2s ease-in;
}

div:focus-within label {
  font-weight: 900;
}

label::after {
  content: ':';
}

input {
  background-color: var(--color);
  transition: color 0.3s ease-in;
}

input:focus-visible {
  outline: 0.3em solid var(--color);
  outline-offset: 0.3em;
}

input:invalid {
  --color: var(--color-invalid);
}

input:valid {
  --color: var(--color-valid);
}

code {
  color: hsl(120 100% 20%);
  background-color: hsl(0 0% 0% / 0.2);
  font-family: monospace;
  font-size: 1.1em;
  font-weight: 400;
  padding-inline: 0.25em;
}

details {
  flex-basis: 100%;
}

summary {
  cursor: pointer;
}

em {
  font-style: italic;
}

<div >
  <label for="idname1" >Name</label>
  <input type="text" placeholder="eg: John" id="idname1" pattern="[A-Za-z] " required>
  <details>
    <summary><code>pattern="[A-Za-z] "</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>A-Z</code> specifies the range from (uppercase) A to (uppercase) Z,</li>
      <li><code>a-z</code> specifies the range from (lowercase) a to (lowercase) z,</li>
      <li><code> </code> specifies at <em>least</em> one match of the preceding character (or range of characters).</li>
    </ol>
  </details>
</div>

<div >
  <label for="idname2" >Name</label>
  <input type="text" placeholder="eg: Jonny" id="idname2" pattern="[A-Za-z]{5,}" required>
  <details>
    <summary><code>pattern="[A-Za-z]{5,}"</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>A-Z</code> specifies the range from (uppercase) A to (uppercase) Z,</li>
      <li><code>a-z</code> specifies the range from (lowercase) a to (lowercase) z,</li>
      <li><code>{5,}</code> specifies a minimum of <em>5</em> matches with no upper-limt</li>
    </ol>
  </details>
</div>

<div >
  <label for="idname3" >Name</label>
  <input type="text" placeholder="eg: Marie-Antoinette" id="idname3" pattern="[A-Za-z-]{5,16}" required>
  <details>
    <summary><code>pattern="[A-Za-z]{5,16}"</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>A-Z</code> specifies the range from (uppercase) A to (uppercase) Z,</li>
      <li><code>a-z</code> specifies the range from (lowercase) a to (lowercase) z,</li>
      <li><code>-</code> permits a literal hyphen within the string,</li>
      <li><code>{5,16}</code> specifies a minimum of <em>5</em> and a maximum of <em>16</em> matches.</li>
    </ol>
  </details>
</div>

<div >
  <label for="idname4" >Name</label>
  <input type="text" placeholder="eg: Sally Ann" id="idname4" pattern="[A-Za-z\s-]{5,16}" required>
  <details>
    <summary><code>pattern="[A-Za-z\s-]{5,16}"</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>s</code> includes white-space characters within the permitted string,</li>
      <li><code>A-Z</code> specifies the range from (uppercase) A to (uppercase) Z,</li>
      <li><code>a-z</code> specifies the range from (lowercase) a to (lowercase) z,</li>
      <li><code>{5,16}</code> specifies a minimum of <em>5</em> and a maximum of <em>16</em> matches.</li>
    </ol>
  </details>
</div>

<div >
  <label for="idname5" >Name</label>
  <input type="text" placeholder="eg: Sally Ann" id="idname5" pattern="[A-Z]{1,}[a-zA-Z\s-]{3,}[^\s-]" required>
  <details>
    <summary><code>pattern="[A-Z][a-zA-Z\s-]{3,}[^\s-]"</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>[A-Z]</code> requires one uppercase character in the range from A-Z</li>
      <li><code>[a-zA-Z\s-]</code> followed by another character from the range of <em>a</em> to <em>z</em>, uppercase or lowercase, also permitting white-space or a literal hyphen <em>-</em> character</li>
      <li><code>{3,}</code> specifies a minimum of <em>5</em> with no maximum number,</li>
      <li><code>[^\s-]</code> and cannot end with either a white-space character or hyphen literal, the caret <code>^</code> at the first position within the square brackets acts as a <em>not</em> operator for the other characters.</li>
    </ol>
  </details>
</div>

Reference:

pattern attribute.

Bibliography:

Regular expressions.
"Regular expressions syntax cheatsheet," Mozilla Developer Network.

CodePudding user response：

The only problem you have with your current code is that you specified that the pattern must be only one character; this can be verified using the :valid pseudo-class:

::placeholder {
  font-style: italic;
  color: hsl(0 10% 10%);
}

input:invalid {
  background-color: hsl(0 100% 80% / 0.5);
}

input:valid {
  background-color: lime;
}

<div >
  <label for="idname" >Name</label>
  <input type="text" placeholder="Name" id="idname" pattern="[A-Za-z]" required>
</div>

To correct this, you simply have to add the option to have multiple characters as follows (explanations are offered in the <details> elements within the demo):

:root {
  --color-invalid: hsl(0 100% 80% / 0.5);
  --color-valid: hsl(120deg 61% 50% / 0.5);
}

::placeholder {
  font-style: italic;
  color: hsl(0 10% 10%);
}

div {
  border: 1px solid #000;
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  inline-size: clamp(20em, 50vw, 900px);
  margin-block: 1em;
  margin-inline: auto;
  padding: 0.25em;
}

label {
  font-weight: 400;
  transition: font-weight 0.2s ease-in;
}

div:focus-within label {
  font-weight: 900;
}

label::after {
  content: ':';
}

input {
  background-color: var(--color);
  transition: color 0.3s ease-in;
}

input:focus-visible {
  outline: 0.3em solid var(--color);
  outline-offset: 0.3em;
}

input:invalid {
  --color: var(--color-invalid);
}

input:valid {
  --color: var(--color-valid);
}

code {
  color: hsl(120 100% 20%);
  background-color: hsl(0 0% 0% / 0.2);
  font-family: monospace;
  font-size: 1.1em;
  font-weight: 400;
  padding-inline: 0.25em;
}

details {
  flex-basis: 100%;
}

summary {
  cursor: pointer;
}

em {
  font-style: italic;
}

<div >
  <label for="idname1" >Name</label>
  <input type="text" placeholder="eg: John" id="idname1" pattern="[A-Za-z] " required>
  <details>
    <summary><code>pattern="[A-Za-z] "</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>A-Z</code> specifies the range from (uppercase) A to (uppercase) Z,</li>
      <li><code>a-z</code> specifies the range from (lowercase) a to (lowercase) z,</li>
      <li><code> </code> specifies at <em>least</em> one match of the preceding character (or range of characters).</li>
    </ol>
  </details>
</div>

<div >
  <label for="idname2" >Name</label>
  <input type="text" placeholder="eg: Jonny" id="idname2" pattern="[A-Za-z]{5,}" required>
  <details>
    <summary><code>pattern="[A-Za-z]{5,}"</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>A-Z</code> specifies the range from (uppercase) A to (uppercase) Z,</li>
      <li><code>a-z</code> specifies the range from (lowercase) a to (lowercase) z,</li>
      <li><code>{5,}</code> specifies a minimum of <em>5</em> matches with no upper-limt</li>
    </ol>
  </details>
</div>

<div >
  <label for="idname3" >Name</label>
  <input type="text" placeholder="eg: Marie-Antoinette" id="idname3" pattern="[A-Za-z-]{5,16}" required>
  <details>
    <summary><code>pattern="[A-Za-z]{5,16}"</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>A-Z</code> specifies the range from (uppercase) A to (uppercase) Z,</li>
      <li><code>a-z</code> specifies the range from (lowercase) a to (lowercase) z,</li>
      <li><code>-</code> permits a literal hyphen within the string,</li>
      <li><code>{5,16}</code> specifies a minimum of <em>5</em> and a maximum of <em>16</em> matches.</li>
    </ol>
  </details>
</div>

<div >
  <label for="idname4" >Name</label>
  <input type="text" placeholder="eg: Sally Ann" id="idname4" pattern="[A-Za-z\s-]{5,16}" required>
  <details>
    <summary><code>pattern="[A-Za-z\s-]{5,16}"</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>s</code> includes white-space characters within the permitted string,</li>
      <li><code>A-Z</code> specifies the range from (uppercase) A to (uppercase) Z,</li>
      <li><code>a-z</code> specifies the range from (lowercase) a to (lowercase) z,</li>
      <li><code>{5,16}</code> specifies a minimum of <em>5</em> and a maximum of <em>16</em> matches.</li>
    </ol>
  </details>
</div>

<div >
  <label for="idname5" >Name</label>
  <input type="text" placeholder="eg: Sally Ann" id="idname5" pattern="[A-Z]{1,}[a-zA-Z\s-]{3,}[^\s-]" required>
  <details>
    <summary><code>pattern="[A-Z][a-zA-Z\s-]{3,}[^\s-]"</code></summary>
    <ol >
      <li><code>[...]</code> specifies the acceptable characters,</li>
      <li><code>[A-Z]</code> requires one uppercase character in the range from A-Z</li>
      <li><code>[a-zA-Z\s-]</code> followed by another character from the range of <em>a</em> to <em>z</em>, uppercase or lowercase, also permitting white-space or a literal hyphen <em>-</em> character</li>
      <li><code>{3,}</code> specifies a minimum of <em>5</em> with no maximum number,</li>
      <li><code>[^\s-]</code> and cannot end with either a white-space character or hyphen literal, the caret <code>^</code> at the first position within the square brackets acts as a <em>not</em> operator for the other characters.</li>
    </ol>
  </details>
</div>

JS Fiddle demo.

Reference:

pattern attribute.

Bibliography:

Regular expressions.
"Regular expressions syntax cheatsheet," Mozilla Developer Network.