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

Recommended Answers

All 7 Replies

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

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

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?

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

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

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

Error: TypeError: dancingForm.validate is not a function

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.