Having tried the numerous suggested ways from twitter and the various plugins/addons which offer the answer (and failed) – I decided to switch to my trusty jQuery to accomplish the task.

And so, in true EE Community style – here’s how I accomplished the job, I hope it’ll help some of you in the future.

Ok, so include your jQuery files and I always separate my jQuery from the page in a /js/common.js, but you can put it wherever you want.

Create your member signup form etc…

<form id="register_member_form" method="post" action="/">
<input type="hidden" name="XID" value="{XID_HASH}" />
<input type="hidden" name="ACT" value="10" />
<input type="hidden" name="RETURN_URL" id="RETURN_URL" value="/LINK/TO/NEXT/STEP" />
Your Name :<br />
<input name="screen_name" type="text" size="45" />
<!-- </label> -->
<br /><br />
Email :<br />
<input name="email" type="text" size="45" />
<br /><br />
Your Company :<br />
<input name="m_field_id_12" id="company" type="text" size="45" />
<br /><br />
<input type="button" id="reg_submit" value="Register" />
</form>

Notice, there’s no ‘submit’ button there – I’ve purposely removed it on this example, because the registration was irrelevant if javascript wasn’t enabled, so if you do have a user which doesn’t have JS enabled, you simply have to tell them the registration wont work with a <noscript> etc.

So, in your /js/common.js file (or wherever you’re putting your jQuery), you just need to put a handler to intercept the click of that button:

$(document).ready(function(){
$("#reg_submit").click(function(){

})
})

Next step, is now to ‘post’ the form using jQuery – as follows:

$(document).ready(function(){
$("#reg_submit").click(function(){

$.ajax({
type: 'POST', //We're telling jQuery we're doing a POST.
url: '/',
data: $("#register_member_form").serialize(), // This encapsulates all the form data and passes it as FORM_DATA.
success: function(data){
// Now we need to do something with the data that ExpressionEngine sends back!
}
})
return false; // Make sure we return false.

})
})

And Hey Presto! We now have jQuery executing the form on the fly, without redirecting the user anywhere. The problem is now that we don’t know for definite whether the form post was successful or not.

So we need to add another level now to query the returned data. To accomplish this, I’m searching the returned data for certain keywords and then acting accordingly as follows:

if (data.search(/error/) >= 0) // Check to see if the word 'error' occurs in the returned data.
{
var $data = $(data);


var err = "There were errors found in your entry:\\n";

$data.find('li').each(function() { // Check each instance of the <li> in the returned data and iterate through.
err+= "\\t" + $(this).text() + "\\n";
});

alert(err); // Alert the Error which will detail all the values of the <li> (i.e the errors!)
}
else
{
location.replace( $("#RET").val() ); // There was no error, so we're going to redirect the user to the next step now (set in the RETURN_URL form field)
}


so, the complete code now looks like this:

$(document).ready(function(){
$("#reg_submit").click(function(){

$.ajax({
type: 'POST', //We're telling jQuery we're doing a POST.
url: '/',
data: $("#register_member_form").serialize(), // This encapsulates all the form data and passes it as FORM_DATA.
success: function(data){
if (data.search(/error/) >= 0) // Check to see if the word 'error' occurs in the returned data.
{
var $data = $(data);

var err = "There were errors found in your entry:\\n";

$data.find('li').each(function() { // Check each instance of the <li> in the returned data and iterate through.
err+= "\\t" + $(this).text() + "\\n";
});


alert(err); // Alert the Error which will detail all the values of the <li> (i.e the errors!)
}
else
{
location.replace( $("#RET").val() ); // There was no error, so we're going to redirect the user to the next step now (set in the RETURN_URL form field)
}
}
})
return false; // Make sure we return false.

})
})


…and there you go! Now ‘any’ error that EE returns as part of the member signup process, will be picked up by jQuery and returned in the alert. This solution certainly doesn’t *replace* client-side validation, but it certainly provides you with another layer and the user never sees the ugly EE error message!

The benefit of this solution also means that when you go to the second step, if you’ve set your Member settings for ‘no activation email’ – once the first step is completed and they are registered, they are also automatically logged in (and so all the member settings are available) for onward use.

This script *should* work for any form processed in EE, but I’ve only tested it on the Member Subscription Form.

I hope this provides some use for you as it has for me.