Hello, everyone.

I have recently put to practical use Andrew Tetlaw's Really Easy Field Validation with Prototype technique in a web page containing the usual contact form. I liked the way in which the user, not having filled the required fields, is warned of such an oversight when trying to submit the form.

There was also a feature I found interesting to the effect that the validation advice (as the js library itself refers to it) could be reset. It was documented on the page linked above under the heading Javascript API in these terms:

The class has an instance function which resets all the field validation:

Code:
<script type="text/javascript">
    var valid = new Validation('form-id');
    valid.reset();
</script>
Note that it doesn't reset the form, just the validation.
At first, when I added onclick="valid.reset(); return false" to the reset button, I could not get the reset button to reset the validation advice: it would only reset form fields in the manner of the usual reset button.

When, however, I associated the above piece of code with the form element itself (onreset="valid.reset(); return false"), the validation advice would be reset delightfully, but there was no resetting form fields at all, no matter what I tried.

While this is by no means a major issue, I should, nevertheless, be most indebted to anyone willing to suggest a solution to be able to add another function allowing the form fields to be reset, too, using the reset button while retaining the current ability to reset validation advice.

The simple form mark-up, if needed, follows below:

Code HTML4Strict:
<form id="contact_form" action="scripts/submit.php" method="post" onreset="valid.reset(); return false">
      <fieldset>
      <legend><span>Your Contact Details</span></legend>
      <ol>
        <li>
          <label for="name" accesskey="n">Name: <img src="images/asterisk.gif" width="8" height="8" alt="Required field"  /></label>
          <input id="name" name="name" class="required" type="text" />
        </li>
        <li>
          <label for="email" accesskey="e">Email address: <img src="images/asterisk.gif" width="8" height="8" alt="Required field"  /></label>
          <input id="email" name="email" class="required validate-email" type="text" />
        </li>
      </ol>
      </fieldset>
      <fieldset>
      <legend><span>Your Message</span></legend>
      <ol>
        <li>
          <label for="message" accesskey="m">Message: <img src="images/asterisk.gif" width="8" height="8" alt="Required field"  /></label>
          <textarea id="message" name="message" class="required" cols="" rows=""></textarea>
        </li>
      </ol>
      </fieldset>
      <fieldset>
      <button type="submit"><img src="images/submit.gif" width="16" height="16" alt="Submit form" /> Submit</button>
      <button type="reset"><img src="images/reset.gif" width="16" height="16" alt="Reset form" /> Reset</button>
      </fieldset>
    </form>
<script type="text/javascript">
    var valid = new Validation('contact_form');
</script>