[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

[jscheuer1]

One could hope that after performing:

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

the variable dancingForm now is a boolean value of true or false as to whether or not the form validated. But it probably isn't. Instead some property of the variable dancingForm (which is now most likely an object, an instance of the Validation function) holds that information. Or that information may be unavailable, a little hard to believe, but possible.

If dancingForm were such a boolean as mentioned, you could just 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});
		if(!dancingForm){
			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);  
});

But, as I say, probably not, perhaps it (the Validation function) has a way to communicate whether or not the form it is acting upon has passed or failed validation. If so, you could probably use that. It would, as I also say, probably become a property of dancingForm. Something like:

dancingForm.passed

or there might be an onfailure function and/or an onsuccess function you could use to set a boolean and use that.

If the above code doesn't work, which I doubt it will, I would need to see the documentation and/or the full code for the Validation function.

[alexjewell]

That script didn't work. Here's the page: http://alexjewell.com/beta/index.php?dance2the=contact. The script is http://alexjewell.com/beta/validation.js

Also, in my original post, is a link to where I actually found the javascript, as well: http://tetlaw.id.au/view/javascript/...eld-validation

[jscheuer1]

Sorry, missed the link to the docs in the first post. According to them, you can 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});
		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);  
});

Just to be on the safe side (zooming in and adding):

		var dancingForm = new Validation('formDance', {useTitles:true, onSubmit:false});
		if(!dancingForm.validate()){
			return;
		}

The dancingForm.validate() is said to return the boolean value I was looking for. Adding the , onSubmit:false is said to prevent the Validation function from messing with whether the form submits or not, which presumably you already have covered, so don't want the Validation function re-enabling it unexpectedly.

[alexjewell]

Works beautifully. Thank you!