How to reset Magento Form Validation?

Question

I have a custom form in my magento store, and use varienform validation. Everything works fine. But requirement is, I need a clear button so that I can click that button to reset the form inputs including the validation error messages.

the below image is my current form:

after clicking Clear buton it should become like this:

How can I do this? Can anyone help?

Answer 1

The Form-Validator is defined here:

/app/design/frontend/base/default/template/sendfriend/send.phtml:135
var productSendtofriendForm = new VarienForm('product_sendtofriend_form');

and the VarienForm has a validator and this validator has a reset method:

/js/prototype/validation.js:155
reset : function() {
    Form.getElements(this.form).each(Validation.reset);
},

Try this:

Add a clear button, give it suggestform_clear as id

<button type="button" title="Clear" class="button" id="suggestform_clear"><span>Clear</span></button>

and add this script below

var productSuggestForm = new VarienForm('form-suggestproduct');
$('suggestform_clear').observe('click', function(){
    productSuggestForm.validator.reset();
}.bind(productSuggestForm));