title: Simple Regular Expression for spaces and uppercase and lowercase letters only
body: <p>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:</p>
  
  <pre><code>pattern="[a-zA-Z ]*"
  </code></pre>
  
  <p>It seems to work, but I also tried <code>pattern="[a-zA-Z ]"</code> but this failed.</p>
  
  <p>Is the <code>pattern="[a-zA-Z ]*"</code> 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.</p>
  
  <p>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</p>
  
  <p>Codepen URL: <a href="https://codepen.io/anon/pen/rgvyjq" rel="nofollow noreferrer">https://codepen.io/anon/pen/rgvyjq</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showEmailError() {
    let emailError = $('#email-error');
    
    emailError.fadeIn('slow');
    emailError.text('Please enter a valid email address');
    
    setTimeout(() =&gt; emailError.fadeOut('slow'), 3000);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;form method="post"&gt;
    &lt;label for="forename"&gt;* First Name:&lt;/label&gt;
    &lt;input type="text" id="forename" name="first-name" required="required" minlength="2" maxlength="20" pattern="[a-zA-Z ]*" oninvalid="setCustomValidity('Invalid Forename')" oninput="setCustomValidity('')"&gt;
  
    &lt;label for="surname"&gt;Last Name:&lt;/label&gt;
    &lt;input type="text" id="surname" name="last-name"&gt;
  
    &lt;label for="address"&gt;Addess:&lt;/label&gt;
    &lt;textarea type="text" id="address" name="address"&gt;&lt;/textarea&gt;
  
    &lt;label for="country"&gt;Country:&lt;/label&gt;
    &lt;input type="text" id="country" name="country"&gt;
  
    &lt;label for="postcode"&gt;Postcode:&lt;/label&gt;
    &lt;input type="text" id="postcode" name="postcode"&gt;
  
    &lt;label for="phone"&gt;Phone:&lt;/label&gt;
    &lt;input type="text" id="phone" name="phone"&gt;
  
    &lt;label for="email"&gt;* Email:&lt;/label&gt;
    &lt;span id="email-error"&gt;Error&lt;/span&gt;
    &lt;input type="text" id="email" name="email" required="required" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" oninvalid="showEmailError()"&gt;
  
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>