Question 2524 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Only alphabetical text in field – WordPress

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 class="mc-address-fields-group">
  <div class="mc-field-group">
    <label for="mce-ADDRESS-city">City</label>
    <input type="text" maxlength="40" name="CITY" id="mce-ADDRESS-city" class="required" required>
  </div>
  <div class="mc-field-group">
    <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" class="required" required>
  </div>
</div>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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 class="mc-address-fields-group">
    <div class="mc-field-group">
      <label for="mce-ADDRESS-city">City</label>
      <input
        type="text" name="CITY" id="mce-ADDRESS-city" class="required"
        placeholder="Enter a city name (letters and spaces only)"
        pattern="[a-zA-Z][a-zA-Z ]*" maxlength="40" required>
    </div>
    <div class="mc-field-group">
      <label for="mce-ADDRESS-zip">Zip Code</label>
      <input
        type="number" name="ZIP" id="mce-ADDRESS-zip" class="required"
        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 class="mc-address-fields-group">
    <div class="mc-field-group">
      <label for="mce-ADDRESS-city">City</label>
      <input
        type="text" name="CITY" id="mce-ADDRESS-city" class="required"
        placeholder="Enter a city name (letters and spaces only)"
        pattern="[a-zA-Z][a-zA-Z ]*" maxlength="40" required>
    </div>
    <div class="mc-field-group">
      <label for="mce-ADDRESS-zip">Zip Code</label>
      <input
        type="text" name="ZIP" id="mce-ADDRESS-zip" class="required" 
        placeholder="Enter a valid zip code e.g. 12345"
        pattern="d{5}" maxlength="5" required>
    </div>
  </div>
  <button type="submit">Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search