Aaron Aaron - 6 months ago 20
HTML Question

HTML5 pattern not validating

This is my

input
element. I want it to accept only letters (No numbers or any other characters).

<input type="text" name="firstName" pattern="[a-zA-Z]" class="form-control" id="firstName" placeholder="First Name" required>


This is my entire partial view.

<form method = "post" action = "" ng-controller = "signUpCtrl as signUp">

<div class="form-group row">
<label for="firstName" class="col-sm-2 form-control-label">First Name</label>
<div class="col-sm-10">
<input type="text" name="firstName" pattern="[a-zA-Z]" class="form-control" id="firstName" placeholder="First Name" required>
</div>
</div>

<div class="form-group row">
<label for="middleName" class="col-sm-2 form-control-label">Middle Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" required>
</div>
</div>

<div class="form-group row">
<label for="lastName" class="col-sm-2 form-control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>

<div class="form-group row">
<label for="dob" class="col-sm-2 form-control-label">Date of Birth</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="dob" placeholder="Date of Birth" required>
</div>
</div>

<div class="form-group row">
<label for="userName" class="col-sm-2 form-control-label">User Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userName" placeholder="User Name" required>
</div>
</div>

<div class="form-group row">
<label for="password" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
</div>

<div class="form-group row">
<label for="confirmPassword" class="col-sm-2 form-control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
</div>
</div>

<div class="form-group row">
<label for="email" class="col-sm-2 form-control-label">Email Address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
</div>
</div>

<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10 text-center">
<button type="submit" class="btn btn-lg btn-info submitButton">Submit</button>
</div>
</div>

</form>


I am using - Google Chrome 50.0.2661.94 (Official Build) m (32-bit)

Answer

Use ^[a-zA-Z][^0-9]+$ or ^\w[^\d]+$ instead of [a-zA-Z].

Edit :

If you need to skip symbols also then use :

^[a-zA-Z][^0-9-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]+$.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class='container'>

  <div class="panel panel-default">
    <div class="panel-body">

      <form method="post" action="" ng-controller="signUpCtrl as signUp">

        <div class="form-group row">
          <label for="firstName" class="col-sm-2 form-control-label">First Name</label>
          <div class="col-sm-10">
            <input type="text" name="firstName" pattern="^[a-zA-Z][^0-9]+$" class="form-control" id="firstName" placeholder="First Name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="middleName" class="col-sm-2 form-control-label">Middle Name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="middleName" placeholder="Middle Name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="lastName" class="col-sm-2 form-control-label">Last Name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="dob" class="col-sm-2 form-control-label">Date of Birth</label>
          <div class="col-sm-10">
            <input type="date" class="form-control" id="dob" placeholder="Date of Birth" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="userName" class="col-sm-2 form-control-label">User Name</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="userName" placeholder="User Name" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="password" class="col-sm-2 form-control-label">Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="Password" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="confirmPassword" class="col-sm-2 form-control-label">Confirm Password</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password" required>
          </div>
        </div>

        <div class="form-group row">
          <label for="email" class="col-sm-2 form-control-label">Email Address</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="email" placeholder="Email Address" required>
          </div>
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-lg btn-info submitButton">Submit</button>
        </div>

      </form>
    </div>
  </div>

</div>

Comments