0

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

4
Contributors
7
Replies
11
Views
7 Years
Discussion Span
Last Post by Troy III
0

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

0

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);  
});
0

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?

0

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);  
});
0

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

Error: TypeError: dancingForm.validate is not a function

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.