Adding an onSubmit="" to Sign-up form, any easy way?

mahodder

Is there any easy way to add something like: onSubmit="return ValidateForm()" inside the <form> tag for the sign up form? I want to be able to validate some custom fields with javascript before the form is submitted. I'm crossing my fingers that this would be an easy hack, I have tried to figure it out myself but so far no luck.

WallPhone

I'm really not the best person to explain this, but look up addEventListener functions as an alternative way to attach a function to the form's events.

jimw

I've worked with the signup form to add a field. I won't be home until later, but will look at what I did. You can check in my profile for my email address.

mahodder

@jimw: It's not a field I am looking to add though its an attribute in the starting <form tag> for the sign up form. Is that what you mean? example: <form onSubmit="return ValidateForm()"> </form>

mahodder

@WallPhone: I could try and do it that way but that will bring a lot more cross browser compatibility problems it seems from my research.

WallPhone

Then the other solution would be to go into your themes folder, copy people_apply_form_nopostback.php into the themes/Vanilla folder, and make your edit.

mahodder

Yeah thats the first place I looked, unfortunately the form is not rendered there in standard html as I hoped, rather it is through some funky Vanilla stuff that I am not sure how to add what I need.

WallPhone

Don't worry about the funky stuff (PHP), just edit what you need in what looks like HTML. For example, the top few lines after the edit would look like this:<?php // Note: This file is included from the library/People/People.Control.ApplyForm.php class. echo '<div class="About"> '.$this->Context->GetDefinition('AboutMembership').' <p><a href="'.GetUrl($this->Context->Configuration, $this->Context->SelfUrl).'">'.$this->Context->GetDefinition('BackToSignInForm').'</a></p> </div> <div id="Form" class="ApplyForm" onsubmit="return ValidateForm()"> <fieldset> <legend>'.$this->Context->GetDefinition('MembershipApplicationForm').'</legend> <p>'.$this->Context->GetDefinition('AllFieldsRequired').'</p>';

edit: Oh shoot... that isn't a form element, its a div... checking...

mahodder

hehe, yeah thats how easy I was hoping it was going to be, unfortunately not :(

WallPhone

Dug through the form control where the form element is generated and there aren't any built-in methods to attach attributes. A really hacky method would be to start output buffering before and after the form renders, capture that, parse the event into it then spit it back out. Not fun, and not sure if it even would work. Looks like this question needs to be answered by a Javascript guru. There are prototype and scriptacoulous libraries included with Vanilla that may help.

Stash

And it can be done with jQuery as well - but validation should be both client and server side, never just client.

quickguap

mahooder do this..

put your javascript functions into [directory of vanilla install]/js/global.js

then, open up the file in the /theme folder, and add {onsubmit="function();"} right after the opening "<form" tag.

mahodder

@quickguap: There is no opening form tag in the file in the /theme folder, that is the main problem here. I might just do it on server side I guess, there doesn't seem to be any easy way to do it on client side with Vanilla.

quickguap

Oh your so right, Can't believe I didn't remember that. You can however do this. Instead of onsubmit to the form tag, do what I said above in the global.js and add onclick="function();" to the submit button.

mahodder

@quickguap: Of course! That works :)

quickguap

Cool!

Stash

Any chance of a ZIP file with all these changes in?