I just searched to see if this question had been answered before, and while there are LOTS of posts regarding signup customization, this particular scenario hasn't been addressed as far as I can see. I'm adding signup forms to external pages and everything's working except for checking uniqueness on the username. I have included the javascript below the standard signup form, which appears to be the code required to do this. Can someone check my code and tell me what I forgot? The page in question is at http://www.PowerKeysPub.com/members/home Any suggestions will be appreciated. Thanks. The relevant code is here: Code: <form id="signup2" method="post" action="/amember/signup.php"> <table width="425" cellspacing="5" cellpadding="5" border="2" align="center"> <tbody> <tr> <td> <p><input type="checkbox" checked="" name="agree" />Yes, I want free access to your unique teleseminar series as well as your Instant Success Ebook Library. I understand I am under no obligation whatsoever and I may cancel my membership at any time. I also understand that my personal details will remain private and will not be shared with any 3rd parties.</p> <p class="rtecenter">First Name: <input type="text" class="required" name="name_f" value="" size="15" /></p> <p class="rtecenter">Last Name: <input type="text" class="required" name="name_l" value="" size="15" /></p> <p class="rtecenter">Preferred Username: <input type="text" id="f_login" class="{required:true, rangelength:[4, 32], remoteUniqLogin: '/amember/ajax.php'}" name="login" value="" size="15" /></p> <p class="rtecenter">Email Address: <input type="text" id="f_email" class="required email" name="email" value="" size="30" /><br /> <em>(The system will send your password to this address,<br /> so make sure to enter a valid one.)</em></p> <p class="rtecenter">Enter Verification Text</p> <p class="rtecenter"><img width="122" height="62" src="http://www.powerkeyspub.com/amember/captcha.php?for=signup" alt="Verification Image" /> <br /> <input type="text" class="required" name="captcha" maxlength="6" style="width: 119px;" /></p> <p class="rtecenter"><input type="hidden" name="product_id" value="1" /> <input type="hidden" name="paysys_id" value="authorize_aim" /> <input type="hidden" name="do_payment" value="1" /> <input type="hidden" name="price_group" value="" /> <input type="submit" value=" Instant Access " /></p> </td> </tr> </tbody> </table> </form> <script type="text/javascript" src="https://www.powerkeyspub.com/amember/includes/jquery/jquery.js?smarty"></script> <script type="text/javascript" src="https://www.powerkeyspub.com/amember/includes/jquery/jquery.select.js?smarty"></script> <script type="text/javascript" src="https://www.powerkeyspub.com/amember/includes/jquery/jquery.metadata.min.js?smarty"></script> <script type="text/javascript" src="https://www.powerkeyspub.com/amember/includes/jquery/jquery.validate.pack.js?smarty"></script> <script type="text/javascript"> jQuery.validator.addMethod("remoteUniqLogin", function(value, element, params) { var previous = this.previousValue(element); if (!this.settings.messages[element.name] ) this.settings.messages[element.name] = {}; this.settings.messages[element.name].remoteUniqLogin = this.settings.messages[element.name].remote = typeof previous.message == "function" ? previous.message(value) : previous.message; if ( previous.old !== value ) { previous.old = value; var validator = this; this.startRequest(element); var data = { 'do' : "check_uniq_login", 'login' : $("#f_login").val(), 'email' : $("#f_email").val(), 'pass' : $("#f_pass0").val() }; jQuery.ajax({ type: "POST", url: params, mode: "abort", port: "validate" + element.name, dataType: "json", data: data, success: function(response) { if ( !response || response.errorCode>0 ) { var errors = {}; validator.settings.messages[element.name]['remote'] = validator.settings.messages[element.name]['remoteUniqLogin'] = response.msg; errors[element.name] = response.msg || validator.defaultMessage( element, "remoteUniqLogin" ); previous.message = response.msg; jQuery.data(element, "previousValue", previous); validator.showErrors(errors); } else { var submitted = validator.formSubmitted; validator.prepareElement(element); validator.formSubmitted = submitted; validator.successList.push(element); validator.showErrors(); } previous.valid = response && (response.errorCode == 0); validator.stopRequest(element, response); } }); return "pending"; } else if( this.pending[element.name] ) { return "pending"; } return previous.valid; }, "Incorect value"); </script><script type="text/javascript"> jQuery.validator.addMethod("remoteCoupon", function(value, element, params) { var previous = this.previousValue(element); if (!this.settings.messages[element.name] ) this.settings.messages[element.name] = {}; this.settings.messages[element.name].remoteCoupon = typeof previous.message == "function" ? previous.message(value) : previous.message; if (value == "") return true; if ( previous.old !== value ) { previous.old = value; var validator = this; this.startRequest(element); var data = { 'do' : "check_coupon", 'coupon' : $("#f_coupon").val() }; jQuery.ajax({ type: "POST", url: params, mode: "abort", port: "validate" + element.name, dataType: "json", data: data, success: function(response) { if ( !response || response.errorCode>0 ) { var errors = {}; validator.settings.messages[element.name]['remoteCoupon'] = response.msg; errors[element.name] = response.msg || validator.defaultMessage( element, "remoteCoupon" ); previous.message = response.msg; jQuery.data(element, "previousValue", previous); validator.showErrors(errors); } else { var submitted = validator.formSubmitted; validator.prepareElement(element); validator.formSubmitted = submitted; validator.successList.push(element); validator.showErrors(); } previous.valid = response && (response.errorCode == 0); validator.stopRequest(element, response); } }); return "pending"; } else if( this.pending[element.name] ) { return "pending"; } return previous.valid; }, "Incorect value"); </script> <script type="text/javascript"> // TODO: coupon, uniq_login ajax check, additional fields function checkLogin(){ $("#signup").validate().element("#f_login"); } function checkCoupon(){ $("#signup").validate().element("#f_coupon"); } $(document).ready(function(){ var prevLogin = ""; var prevCoupon = ""; var timeout = null; $("#signup").validate({ onkeyup: function(element) { if ( element.name in this.submitted || element == this.lastElement ) { if (element.id == 'f_login'){ var l = element.value; if (l == prevLogin) return; clearTimeout(timeout); timeout = setTimeout(checkLogin, 1*1000); prevLogin = l; } else if (element.id == 'f_coupon'){ var c = element.value; if (c == prevCoupon) return; clearTimeout(timeout); timeout = setTimeout(checkCoupon, 1*1000); prevCoupon = c; } else this.element(element); } }, rules: { "_notexisting_": "required" // for the following comma }, errorPlacement: function(error, element) { error.appendTo( element.parent()); } }); }); </script>
It's a bit hard for me to believe that no-one has tried putting 2 signup forms on the same page before, but I guess I must be the trailblazer here. After a LOT of trial and error, I've figured out how to get multiple signup forms on a page and have each of them validated separately. Here's the code for 3 signup forms on the same page. On my landing page, I have 1 at the top, 1 in the middle, and a 3rd at the bottom. You can see it in action at: http://www.PowerKeysPub.com/members/home Hope this helps someone else. (It's too long to post directly, so I had to upload it as a text file.)
I noticed on your page, your initial sign-up is free and does not ask for payment information. Are you using aMember for this?, and if so how to you do that with aMember? Other threads seem to indicate that aMember is 'forced continuity' where you MUST collect payment info at sign-up but don't charge until after trial period. I am using PayPal. Does other payment systems function differently in this regard?
The signup form you're referring to is for a free membership where payment info isn't required, so I just created a custom signup form to handle it. I have been working to convert these free members to paid membership through an autoresponder series, although I have to admit that I don't quite have the "formula" down right, and not many are converting. In my current situation, I collect payment info at the time of upgrade, through the normal member.php page.