Simple Regular Expression for spaces and uppercase and lowercase letters only

Question

I've created a simple form where I want the 'first name' field to only allow letters (lowercase and uppercase) and spaces. I've used the following pattern:

pattern="[a-zA-Z ]*"

It seems to work, but I also tried pattern="[a-zA-Z ]" but this failed.

Is the pattern="[a-zA-Z ]*" code the correct regular expression for this requirement, or will it allow some other characters? If so, why do you need the asterisk? I've seen other similar regular expressions have no asterisk, and it's making me believe that there'll be some characters that can be entered other than my requirements.

I can't actually find somewhere that explains regular expressions, like a blog article, another stack overflow post, video, or anything that accurately teaches regular expressions and would be keen to read if anyone has written anything about this. Thanks for any help here

Codepen URL: https://codepen.io/anon/pen/rgvyjq

function showEmailError() {
  let emailError = $('#email-error');
  
  emailError.fadeIn('slow');
  emailError.text('Please enter a valid email address');
  
  setTimeout(() => emailError.fadeOut('slow'), 3000);
}

form {
  background: #f0f0f0;
  padding: 25px;
  border-radius: 5px;
  display: flex;
  flex-flow: row wrap;
}
form input, form label, form textarea { flex-basis: 100% }
form label { padding-bottom: 5px }
form input { padding: 5px }
form input:not(:last-of-type) , form textarea { margin-bottom: 15px }
form textarea { min-height: 50px }
form button {
  padding: 10px 15px;
  margin-top: 20px;
  font-size: 0.8em;
  border: 1px solid #ccc;
}
#email-error {
  background: #FB5835;
  flex-basis: 100%;
  padding: 10px;
  display: none;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<form method="post">
  <label for="forename">* First Name:</label>
  <input type="text" id="forename" name="first-name" required="required" minlength="2" maxlength="20" pattern="[a-zA-Z ]*" oninvalid="setCustomValidity('Invalid Forename')" oninput="setCustomValidity('')">

  <label for="surname">Last Name:</label>
  <input type="text" id="surname" name="last-name">

  <label for="address">Addess:</label>
  <textarea type="text" id="address" name="address"></textarea>

  <label for="country">Country:</label>
  <input type="text" id="country" name="country">

  <label for="postcode">Postcode:</label>
  <input type="text" id="postcode" name="postcode">

  <label for="phone">Phone:</label>
  <input type="text" id="phone" name="phone">

  <label for="email">* Email:</label>
  <span id="email-error">Error</span>
  <input type="text" id="email" name="email" required="required" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" oninvalid="showEmailError()">

  <button type="submit">Submit</button>
</form>

score 3 · Accepted Answer · answered May 25 '19 at 16:30

The * in a regex means 0 or an unlimited amount. It will not allow other characters in your regex [a-zA-Z ]*, but it will allow enmpty strings.

To require at least one character of upper case, lower case, space, but no numbers or symbols, you can use [a-zA-Z ]+

--

Here is a site that helps explain and text regular expressions. You'll see here that there are some subtle changes based on programming languages.

https://regex101.com/

Here is a site that systematically teaches them.

https://regexone.com/

Emma · Answer 2 · 2019-05-25T18:27:24.503

2

Because [a-zA-Z ] would only pass one char such as a, that's might be one reason for why, that we are using [a-zA-Z ]*, [a-zA-Z ]+ or [a-zA-Z\s]+, if here we only wish to pass a-z lower and upper and space more than one time.

RegEx Circuit

jex.im visualizes regular expressions:

edited May 25 '19 at 18:27

answered May 25 '19 at 16:31

Emma

27,428
11
44
69

Simple Regular Expression for spaces and uppercase and lowercase letters only

2 Answers2

RegEx Circuit