HTML5パターンが検証されない

Question

これは私のinput要素です。私はそれが文字（数字または他の文字なし）だけを受け入れるようにしたい。

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

これは私の部分的な全体像です。私が使用しています

<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> 

- Google Chromeの50.0.2661.94（公式ビルド）メートル（32ビット）

Answer 1

使用^[a-zA-Z][^0-9]+$またはその代わり[a-zA-Z]の^\w[^\d]+$。

編集：

あなたもシンボルをスキップする必要がある場合は、使用します。

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

または

^[a-zA-Z][^0-9\W]+$ // this will skip all non-word characters.

<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>

Answer 2

ます（入力要素でこれを使用してください）以下としてみてくださいすることができ：

ng-pattern="/^[A-Za-z]+$/"