HTML input pattern validation

Question

<form class="user" action="code_user.php" method="POST">
  <div class="form-group">
      <label>Enter Full Name</label>
      <input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
   </div>
    <button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>

</form>

In HTML input validation , i have set the pattern of alphebetic only. When testing with numeric input in it , it shows

However, if i correct the input into the alphabets ,it will shows invalid again

I have to refresh the page again to input the correct format only it will not show invalid. Is this normal? This is my code:

<div class="form-group">
     <label>Enter Full Name</label>
     <input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
</div>

Are you sure? It works for me. Try adding a code snippet to your question where we could try it. — Gabriel
– Gabriel, Commented Apr 13, 2020 at 19:32
Does it show the error immediately? The check is only performed on submission of the form (developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) — Bart Barnard
– Bart Barnard, Commented Apr 13, 2020 at 19:36
@BartBarnard yes, it showed the error immediately when i enter a letter — user13245598
– user13245598, Commented Apr 13, 2020 at 19:39

znatno · Accepted Answer · 2020-04-13 19:41:55Z

1

You don't clear your setCustomValidity(). If you set a value with setCustomValidity() then the field is invalid. Just add such attribute to your input tag:

oninput="setCustomValidity('')"

Fixed in your code:

<form class="user" action="code_user.php" method="POST">
    <div class="form-group">
        <label>Enter Full Name</label>
        <input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" oninput="setCustomValidity('')" type="text" name="name" autocomplete="off" required />
    </div>
    <button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>
</form>

answered Apr 13, 2020 at 19:41

znatno

939 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML input pattern validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related