定義済みのパターンでhtmlに検証を追加する方法

Question

私は、A-Za-zのパターンと最大30文字のタイプのテキストを持つように設定したhtml形式の入力を持っています。

私は（正しく検証に反しているというエラーが発生します。私はスティーブのような名前を入力すると

私はエラーを取得し、私は30を入力したときに、それがパターンに合致していても何も入力しないようにしてみてくださいテキスト文字は入力を受け付ける。

私はそれをすると、30個の文字を含めて最大のエントリを受け入れるように取得できますか？これは、0〜30文字の受け入れ

<span class="form-group"> 
     <label for="c_name" class="form-label-bold" >First Name</label> 
     <input name="c_name" id="c_name" class="form-control" type="text" 
     pattern="[A-Za-z]{30}" maxlength="30" required="true" title="Text 
     values only" th:field="*{firstName}" /> 
    </span> 

Answer 1

あなたは一例 https://jsfiddle.net/L0wt09gb/

に働いているここでは、この [A-Za-z]{0,30} にパターンを変更する必要があります30までのように文字の数を制限する場合

Answer 2

。

<span class="form-group"> 
    <label for="c_name" class="form-label-bold" >First Name</label> 
    <input name="c_name" id="c_name" class="form-control" type="text" 
    pattern="[a-zA-Z]{1,30}" maxlength="30" required="true" title="Text 
    values only" th:field="*{firstName}"/> 

</span>