具有输入属性“必需”和“模式”的表单不起作用

Question

Hi i have this code with HTML5:

<form id="pay" method="GET" class="row g-3" style="display:none;" type="hidden">
  <strong>Date</strong></a><br>
  <div class="col-md-10">
    <label for="name_users_card" class="form-label">user card</label>
    <input type="text" class="form-control" id="name_users_card"
           pattern="^[A-Za-zèòà\s]$"
           minlength="3"
           maxlength="20"
           placeholder="titolare carta"
           title="take a valid name" required/>
  </div>
</form>

When I try to run the code, the required control is not working. Why?

Answer 1

don't actually understand the problem but you have an incomplete <a> tag and you made your form hidden by setting display:none;

Answer 2

Your Regular Expression Pattern :

^[A-Za-zèòà\s]$

is a single character .

If you want zero to any number of characters , use:

^[A-Za-zèòà\s]*$

If you want one to any number of characters , use:

^[A-Za-zèòà\s]+$

If you want exactly twenty characters , use:

^[A-Za-zèòà\s]{20}$

If you want three to twenty characters , use:

^[A-Za-zèòà\s]{3,20}$