An issue with form field validation and the reset button

[D.D.S. Polymath]

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:

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

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

[D.D.S. Polymath]

Hmmm... Are there no suggestions whatsoever?

[gRoberts]

don't use the onreset event (i've never used or heard of it) instead use the onclick event on the reset button.

This reset() may already return false, so you should try

<button type="reset"><img src="images/reset.gif" width="16" height="16" alt="Reset form" onclick="return valid.reset();" /> Reset</button>

if not,

<button type="reset"><img src="images/reset.gif" width="16" height="16" alt="Reset form" onclick="valid.reset(); return false;" /> Reset</button>

Ah! mistake...

I didn't actually look at the code correctly,

<button type="reset" onclick="return valid.reset();"><img src="images/reset.gif" width="16" height="16" alt="Reset form" /> Reset</button>

if not,

<button type="reset" onclick="valid.reset(); return false;"><img src="images/reset.gif" width="16" height="16" alt="Reset form" /> Reset</button>

thats better - I added the onclick to the image rather then the button.

[D.D.S. Polymath]

gRoberts, thank you so very much! The penultimate snippet made it work as I wished it would in the first place. All is well now, and I feel quite relieved. Wonderful place, Sitepoint.