Results 1 to 5 of 5

Thread: [Prototype] Validating a form before sending it via Ajax

  1. #1
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default [Prototype] Validating a form before sending it via Ajax

    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:
    Code:
    var dancingForm = new Validation('formDance', {useTitles:true});
    And the submission code:
    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
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    One could hope that after performing:

    Code:
    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:

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

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    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
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Sorry, missed the link to the docs in the first post. According to them, you can do:

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

    Code:
    		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.
    Last edited by jscheuer1; 07-16-2010 at 11:52 PM. Reason: English usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    alexjewell (07-16-2010)

  6. #5
    Join Date
    Mar 2006
    Location
    Cleveland, Ohio
    Posts
    574
    Thanks
    6
    Thanked 5 Times in 5 Posts

    Default

    Works beautifully. Thank you!
    Thou com'st in such a questionable shape
    Hamlet, Act 1, Scene 4

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •