Rhett Claypool Rhett Claypool - 4 months ago 14
HTML Question

After changing the default response from a required statement form doesn't behave normal

so after I made these changes the form won't accept any input. Meaning if I don't put in a first name it says 'Please enter first name". Works like it should. But if I put in a name it still says the same thing. It won't recognize I put in a name. Happens in each field and I have to refresh the page to make it work. Any ideas?

<form action="register.php" method="post">
<p>First Name: <input type="text" name="first_name" size="15" maxlength="20" required oninvalid="this.setCustomValidity('Please Enter first name')"></input> </p>
<p>Last Name: <input type="text" name="last_name" size="15" maxlength="40" required oninvalid="this.setCustomValidity('Please Enter last name')"></input>></p>
p>Email Address: <input type="text" name="email" size="20" maxlength="60" required oninvalid="this.setCustomValidity('Please Enter a valid email')"> </input>></p>
<p>Password: <input type="password" name="pass1" size="10" maxlength="20" required oninvalid="this.setCustomValidity('Please Enter a valid password')"> </input></p>
<p>Confirm Password: <input type="password" name="pass2" size="10" maxlength="20" required></p>
<p><input type="submit" name="submit" value="Register" /></p>
</form>

Answer

You need to setCustomValidity('') to clear the invalidated state of the field.

You can see it work here

<form action="register.php" method="post">
<p>First Name: <input type="text" name="first_name" maxlength="20"
required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter first name')"/></p>
<p>Last Name: <input type="text" name="last_name" size="15" maxlength="40" required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter last name')"/></p>
                                                                      <p>Email Address: <input type="text" name="email" size="20" maxlength="60"    required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter a valid email')"/></p>
<p>Password: <input type="password" name="pass1" size="10" maxlength="20" required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter a valid password')"/> </p>
<p>Confirm Password: <input type="password" name="pass2" size="10"    maxlength="20" required /></p>
<p><input type="submit" name="submit" value="Register" /></p>
</form>