htmlvalidationinternet-explorerinternet-explorer-11

IE11 not re-validating form after form reset

I am using HTML form validation and have discovered a strange issue within IE11. The problem does not appear in Chrome, Firefox, Opera or Edge.

Basically, IE11 does not appear to perform a form reset correctly. I would expect a form reset to clear all validation errors and reset the form values back to their initial values. On the next submit, I would expect the form to re-validate.

What appears to happen during a form reset is only values are reset - validation error states (or even a successful validation) seem to remain unless a user changes the field.

The only workaround I can see for my web app is to reload the page rather than perform a form reset. Any other ideas?

The workflow is as follows:

  1. Using IE11, remove the text from a required input field.
  2. Click Submit, get validation error.
  3. Click Reset, input field value returns to initial value.
  4. Click Submit, get validation error yet the field has been filled in using the initial value.
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>
    <body>
      <form id="theForm" name="theForm">
        <input type="text" name="textBox" value="test" required>
        <input type="submit">
        <input type="reset">
      </form>
    </body>
    </html>
Solution

  • I am able to produce the issue but unfortunately no any solution is available for this specific issue.

    You can try to use work around like first setting the textbox value to empty and then reset the form using JS.

    <!DOCTYPE html>
<html>
<head>
  
<script type="text/javascript">

function resetfrm()
{
document.getElementById("txt1").value='';
document.getElementById("theForm").reset();

alert("clear");
}
</script>
</head>
<body>
  <form id="theForm" name="theForm">
    <input type="text" name="textBox" id="txt1" value="test" required>
    <input type="submit">
    <input type="button" onclick="resetfrm()" value="Reset">
  </form>
</body>
</html>