SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot D.D.S. Polymath's Avatar
    Join Date
    Apr 2005
    Location
    Regnvm ServiŠ
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    An issue with form field validation and the reset button

    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>
    Be not too sure that none of the old magic endures...

  2. #2
    SitePoint Zealot D.D.S. Polymath's Avatar
    Join Date
    Apr 2005
    Location
    Regnvm ServiŠ
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm... Are there no suggestions whatsoever?
    Be not too sure that none of the old magic endures...

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

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

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

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

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


  4. #4
    SitePoint Zealot D.D.S. Polymath's Avatar
    Join Date
    Apr 2005
    Location
    Regnvm ServiŠ
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Be not too sure that none of the old magic endures...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •