如何使用已定义的模式向html添加验证

我有一个html表单的输入，我已经将其设置为a-Za-z模式，并键入最大长度为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]{1,30}" maxlength="30" required="true" title="Text 
    values only"  th:field="*{firstName}"/>

 </span>

当我尝试不输入任何内容时，我（正确地）得到一个错误，即它不符合验证要求

当我输入像Steve这样的名字时，我会得到一个错误，即使它符合模式，当我输入30个文本字符时，它也会接受输入

我如何让它接受最多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>

名字

这接受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]{1,30}" maxlength="30" required="true" title="Text 
    values only"  th:field="*{firstName}"/>

 </span>

名字

这接受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]{1,30}" maxlength="30" required="true" title="Text 
    values only"  th:field="*{firstName}"/>

 </span>

名字

如果要将字符数限制在30个以内，则应将模式更改为此

[A-Za-z]{0,30}

下面是一个工作示例

---

如果要将字符数限制在30个以内，则应将模式更改为此

[A-Za-z]{0,30}

下面是一个工作示例