Required input remains invalid after filled in

Question

I have following simple login form with 'required' on password:

 <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-right">
     <form action="/login" class="navbar-form navbar-right" method="post">
       <div class="form-group">
         <input type="text" class="form-control" name="username" placeholder="Login">
       </div>
       <div class="form-group">
         <input type="password" class="form-control" name="pwd" placeholder="Password" 
                required oninvalid="this.setCustomValidity('Please enter your password')">
       </div>
       <button type="submit" class="btn btn-primary">Log in</button>
     </form>
   </ul>
</div>

If user clicks "Log in" and pwd input is empty, error message will be shown as expected, however if user enters his password after such failed attempt the error message will keep appearing again making "Log in" button uninteractible(even though there is an input in pwd at the moment) until the pwd input loses focus. (I am using bootstrap 3.3.5 and chrome browser.)
How can I fix this bug?

Seems to be working for me: https://jsfiddle.net/tddtss44/ - the only thing I don't know what you've used is the oninvalid. I tryed to submit with no password and it gets stuck in a state where it never thinks the password was filled in. I believe this is caused by your oninvalid statement. When this is removed the state issue goes away. — Ryan Rentfro, Jan 02 '16 at 16:13
@RyanRentfro you experienced it too - the state when it is stuck thinking there is no input is exactly the problem. As you mentioned, removing custom message on invalid helps. The problem is, how can I keep custom message? I would like to localize the message so I guess it is not acceptable to keep default behavior oninvalid for me. — wondra, Jan 02 '16 at 16:21
I'm guessing its the context in which you are using 'this' but I can't say for sure. I normally bind this external from my markup. Meaning I would have a script that runs at startup binding the requirements to my fields then when the form is submitted it's checked/user alerted if needed. However - this question: http://stackoverflow.com/questions/14043589/html5-oninvalid-doesnt-work-after-fixed-the-input-field covers the topic I believe that you are trying to accomplish and it looks like the state needs to be reset per the answer there. — Ryan Rentfro, Jan 02 '16 at 16:25
@RyanRentfro thanks for the reference. Looks similar, and offers two more possible solutions. I am new to this technology and looks like not every tutorial provides complete information about what provided example do and how (I know, I know I should not copy-paste without thinking). — wondra, Jan 02 '16 at 16:57

score 0 · Accepted Answer · answered Jan 02 '16 at 16:38

0

oninvalid="!this.value || this.setCustomValidity('Please enter your password')"

answered Jan 02 '16 at 16:38

Yosvel Quintero

18,669
5
37
46

score 0 · Answer 2 · answered Jan 16 '20 at 07:42

The problem is that the custom validity error message needs to be reset to blank/empty again, or the field will never validate even with the correct data in it.

You can use oninvalid to set the custom validity error message and then use onchange to set message back to blank/empty, and then it will validate properly when corrected.

You can do something like this:

<input type="number" oninvalid="this.setCustomValidity('Please enter INTEGER')" onchange="this.setCustomValidity('')" name="int-only" value="0" min="0" step="1">

Required input remains invalid after filled in

2 Answers2