CODEWITHSUNDEEP
htmlvalidation
user13245598
user13245598

Reputation: 45

HTML input pattern validation

<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 enter image description here

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>

Upvotes: 0

Views: 496

Answers (1)

znatno
znatno

Reputation: 93

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>

Upvotes: 1

Related Questions