Only alphabetical text in field-CodePudding

I have a form where I want the user to only be able to apply alphabetical letters in the City field, but the input type=text allows for numbers.

Can anyone help me find a solution to make it so you can only type in alphabetical letters (a-z).

I have tried using RegExp but it did not work for me. I am using WordPress, maybe it has something to do with it. If there are other solutions prior to regex, I would appreciate it.

<div >
  <div >
    <label for="mce-ADDRESS-city">City</label>
    <input type="text" maxlength="40" name="CITY" id="mce-ADDRESS-city"  required>
  </div>
  <div >
    <label for="mce-ADDRESS-zip">Zip Code</label>
    <input type="number" onKeyDown="if(this.value.length==4 && event.keyCode!=8) return false;" name="ZIP" id="mce-ADDRESS-zip"  required>
  </div>
</div>

CodePudding user response：

You can add a pattern attribute to the <input type="text"> elements. This will only work if the type is text.

You can start with the following pattern: "[a-zA-Z][a-zA-Z ]*"

Note: Don't forget to allow letters AND spaces in a city name. Other characters that should be allowed are hyphens (-), dots (.), and apostrophes (') to name a few.

function validateZip(event) {
  // Triple-equals is preferred over double-equals equality
  if (event.target.value.length === 5 && event.keyCode !== 8) {
    event.preventDefault();
    return false;
  };
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
button[type="submit"] {
  align-self: center;
}
.mc-address-fields-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mc-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mc-field-group label {
  font-size: smaller;
}

<form>
  <div >
    <div >
      <label for="mce-ADDRESS-city">City</label>
      <input
        type="text" name="CITY" id="mce-ADDRESS-city" 
        placeholder="Enter a city name (letters and spaces only)"
        pattern="[a-zA-Z][a-zA-Z ]*" maxlength="40" required>
    </div>
    <div >
      <label for="mce-ADDRESS-zip">Zip Code</label>
      <input
        type="number" name="ZIP" id="mce-ADDRESS-zip" 
        placeholder="Enter a valid zip code e.g. 12345"
        onKeyDown="validateZip(event)" required>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

Proper zip code validation

FYI, I would not make the zip field a number, as some zip codes are zero-padded. For example, Massachusetts zip codes start with zero.

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
button[type="submit"] {
  align-self: center;
}
.mc-address-fields-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mc-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mc-field-group label {
  font-size: smaller;
}

<form>
  <div >
    <div >
      <label for="mce-ADDRESS-city">City</label>
      <input
        type="text" name="CITY" id="mce-ADDRESS-city" 
        placeholder="Enter a city name (letters and spaces only)"
        pattern="[a-zA-Z][a-zA-Z ]*" maxlength="40" required>
    </div>
    <div >
      <label for="mce-ADDRESS-zip">Zip Code</label>
      <input
        type="text" name="ZIP" id="mce-ADDRESS-zip"  
        placeholder="Enter a valid zip code e.g. 12345"
        pattern="\d{5}" maxlength="5" required>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>

CodePudding user response：

You can use the pattern attribute:

<input type="text" pattern="[a-zA-Z]">

No sure if you need to add ^ and $ for the start and end as well, but this is the way to prevent numeric characters.

CodePudding user response：

Do you mean something like this

 <input type="text" pattern="([A-Za-z] )"  />

But it is not supported by all browsers