HTML 输入模式验证

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>

Answer 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>