SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Jun 13, 2007, 03:30 #1
- 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>
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...
-
Jun 15, 2007, 04:49 #2
- 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...
-
Jun 15, 2007, 05:20 #3
- 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>
Code:<button type="reset"><img src="images/reset.gif" width="16" height="16" alt="Reset form" onclick="valid.reset(); return false;" /> Reset</button>
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>
Code:<button type="reset" onclick="valid.reset(); return false;"><img src="images/reset.gif" width="16" height="16" alt="Reset form" /> Reset</button>
-
Jun 15, 2007, 15:15 #4
- 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