[Prototype] Validating a form before sending it via Ajax

[alexjewell]

I'm using the Prototype framework to send a form via Ajax, and I'm using a form validation script (http://tetlaw.id.au/view/javascript/...eld-validation) to validate the form. Both work beautifully by themselves. The problem is this: I need some way to merge the two so that the form submits after validation, and that the form is validated before it's submitted.

Here's the validation code:

var dancingForm = new Validation('formDance', {useTitles:true});

And the submission code:

document.observe('dom:loaded', function() {  
	function sendForm(event){  
		// we stop the default submit behaviour  
		Event.stop(event);  
		var oOptions = {  
			method: "POST",  
			parameters: Form.serialize("formDance"),  
			asynchronous: true,  
			onFailure: function (oXHR) {  
				$('show_hide_form').update('<fieldset class="no_me"><legend>fail</legend><p>Your message was not sent successfully. Please <a href="index.php?dance2the=contact">try again</a>.</p></fieldset>')  
			},                           
			onSuccess: function(oXHR) {  
				$('ctitleholler').update('you sent me a holler.');
				$('cinfo').update();
				$('show_hide_form').update(oXHR.responseText);
			}                 
		};  
		var oRequest = new Ajax.Updater({success: oOptions.onSuccess.bindAsEventListener(oOptions)}, "forms.php", oOptions);             
	}  
	Event.observe('formSubmit', 'click', sendForm, false);  
});

I'm guessing I put the validation script somewhere in the sendForm() function, I just don't know where. Thanks.
Thanks

[asmira]

ajax will send on line 18 Ajax.Updator...

i think after Event.stop.. check Validation.

and make oOption and send request.. or just return.. will good enough

[alexjewell]

The form still submits, but the validation doesn't seem to run at all. Here's the new script; is this what you meant for me to do?

document.observe('dom:loaded', function() {  
	function sendForm(event){  
		// we stop the default submit behaviour  
		Event.stop(event);  
		var dancingForm = new Validation('formDance', {useTitles:true});
		var oOptions = {  
			method: "POST",  
			parameters: Form.serialize("formDance"),  
			asynchronous: true,  
			onFailure: function (oXHR) {  
				$('show_hide_form').update('<fieldset class="no_me"><legend>fail</legend><p>Your message was not sent successfully. Please <a href="index.php?dance2the=contact">try again</a>.</p></fieldset>')  
			},                           
			onSuccess: function(oXHR) {  
				$('ctitleholler').update('you sent me a holler.');
				$('cinfo').update();
				$('show_hide_form').update(oXHR.responseText);
			}                 
		};  
		var oRequest = new Ajax.Updater({success: oOptions.onSuccess.bindAsEventListener(oOptions)}, "forms.php", oOptions);             
	}  
	Event.observe('formSubmit', 'click', sendForm, false);  
});

[asmira]

first.. I`m sorry that i`m not good at english..

what returns Validation object at construct?

I think Validation object check formDance with option useTitle, and returns true or false to dancingForm only.
if it run that way.. you must use

if(dancingForm){var oOptions = ~~~~ var oRequest ~~~}else{return;}

so.. can i see Validation Object?

[alexjewell]

Asmira, thank you very much for your help, but I have since solved the problem myself. Here is the working code:

document.observe('dom:loaded', function() {  
	function sendForm(event){  
		// we stop the default submit behaviour  
		Event.stop(event);
		var dancingForm = new Validation('formDance', {useTitles:true, onSubmit:false});
		if(!dancingForm.validate()){
			return;
		}
		var oOptions = {  
			method: "POST",  
			parameters: Form.serialize("formDance"),  
			asynchronous: true,  
			onFailure: function (oXHR) {  
				$('show_hide_form').update('<fieldset class="no_me"><legend>fail</legend><p>Your message was not sent successfully. Please <a href="index.php?dance2the=contact">try again</a>.</p></fieldset>')  
			},                           
			onSuccess: function(oXHR) {  
				$('ctitleholler').update('you sent me a holler.');
				$('cinfo').update();
				$('show_hide_form').update(oXHR.responseText);
			}                 
		};  
		var oRequest = new Ajax.Updater({success: oOptions.onSuccess.bindAsEventListener(oOptions)}, "forms.php", oOptions);             
	}  
	Event.observe('formSubmit', 'click', sendForm, false);  
});

[asmira]

Oh validation funtion was there :) have a good day~

[tahiryasin]

dancingForm.validate() is showing me this error in console

Error: TypeError: dancingForm.validate is not a function

[Troy III]

document.observe('dom:loaded', function() {
is an overhead since no form gets submited by itself.

if((new Validation('formDance', {useTitles:true})().validate());
should suffice to allow following statements to execute, in case a form validation returns true = has validated.
else return false
to cancel the submision of invalid data; Done.