username & email validator/check for exsisting

Hello again,

I have successfully created a registration form with cf - but notice that for some reason If I try to register with a username or with an email that is already in the jos_users table, I will not be able to full register - but I get no errors??

how can I get the messages that say: ' that username is already in use" etc??

Also - can I perform this check with AJAX so that the form does not have to be submitted before I know the username or email is taken?

Thanks guys!!

Hi samoht,

Yes you can do it with Ajax, or with server-side validation.

IIRC there was an Ajax post a couple of months ago and a serverside validation one in the last week or so.

Bob

Thank Bob,

I am reading up on some of them right now. hopefully I can get it working with out questions of my own, but if not, I will post here

well - unfortunately I do have questions.

I added a few server side functions to catch double entry for username and email - So that pretty much takes care of what I wanted, but I would like to do a ajax validation check like 'community builder' (in there registration form)

So I tried creating a new form for the ajax php and javascript and basically just put the same server side validation in the Form HTML:

<?php
//check if user exist
global $db;
$db =& JFactory::getDBO();
//$text =& JRequest::getString('value', '', 'get');
$text =& JRequest:: getString('value');
$sql = "
    SELECT COUNT(*)
        FROM jos_users
        WHERE username = ".$db->quote($text).";";
if ( $debug ) echo "sql: ".print_r($sql, true)."<br /><br />";
$db->setQuery( $sql );
   if ( $database->loadResult() != 0 )
     {echo "Username Already Taken";}
   else
     {echo "This Username is available";}
?>

Then in my registration form I added this in the Javascript box:

window.addEvent('domready', function() { 
      $('ajax-replace').addEvent('blur', function(e) {
      e = new Event(e).stop();

      var username=$('uname').value;
      var url = "index2.php?option=com_chronocontact&chronoformname=ajax_form&value=username";
  
      new Ajax(url, {
         method: 'get',
         update: $('username_msg')
      }).request();
   });
});

but I am not sure I put this in the right spot? - nor do I see anything when the username field is filled out ??

Max mentioned something about submitting the whole form and using getElementbyId - I think?? but where would that code go?

why not just hack the mooValidation.js script??

Hi samoht,

I used the result parsing method posted by Max and Salman in this thread to create a pair of forms that work OK. This is the Form HTML from the 'registration form' ( Validation needs to be enabled to make sure that the MooTools library is loaded.)

<?php
$script = "window.addEvent('domready', function() {
  $('uname').addEvent('blur', function(e) {
    e = new Event(e).stop();

    var username = $('uname').value;
    if ( username != '' ) {
      var url = 'index2.php?option=com_chronocontact&chronoformname=test_form_16a&value=username&tmpl=component';
 
      new Ajax(url, {
        method: 'get',
        onSuccess: parseResult
      }).request();
    }
    function parseResult(request)
    {
      var msg = request.split('##@##');
      $('username_msg').setHTML(msg[1]);
    }

  });
});";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<div>
  <input type='text' name='uname' id='uname' value='' />
</div>
<div id='username_msg' > </div>
<input type='submit' name='submit' />

and this is the AJAX responder form

<?php
$db =& JFactory::getDBO();
$text =& JRequest:: getString('value');
$sql = "
    SELECT COUNT(*)
        FROM `#__users`
        WHERE `username` = ".$db->quote($text).";";
$db->setQuery( $sql );
echo "##@##";
if ( $database->loadResult() != 0 ) {
  echo "Username Already Taken";
} else {
  echo "This Username is available";
}
echo "##@##";
?>

A couple of changes - the AJAX is only called if the input field has an entry; and the result is sent back as ##@##result string##@## so that the result string can be parsed out of the rest of the page html.

Bob

Thanks Bob,

That looks good - and is quite a bit more clear than the instructions on the other thread.
However, I am getting the wrong response?
I changed the link to reflect my ajax form:

yours:

var url = 'index2.php?option=com_chronocontact&chronoformname=test_form_16a&value=username&tmpl=component';

mine:

var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&value=username&tmpl=component';

but when I type in usernames that I know exist - I still get the message "This username is available"?

Also - I checked the url by manually putting it into the browser window and then swapping out "username" for the different usernames I wanted to test and the output was correct? This must mean that the ajax form is working properly but the script to send the value for "username" in the url is not working (I think?)

Hi samoht,

Put some debug code in the second form then to out put the query - if you have Firebug running you can see the whole page being returned and check the sql.

Bob

ok,

I tried putting in a print_r in the ajax form but then nothing shows?
What kind of debug were you thinking?

when I checked in firebug I saw that the GET was not sending the actual username but just "username" eachtime. Since I dont have any users with the username = "username" I am always getting the return "This Username is avialable"

so the problem I have must be in my var username

Hi samoht,

OK - so the URL needs changing to include the username you are testing

var url = 'index2.php?option=com_chronocontact&chronoformname=test_form_16a&value='+username+'&tmpl=component';

should do it.

Sorry, didn't check that.

Bob

Beautiful!

This is very helpful. I may try to put together a small tut for other cf users.

thanks again.

This is utterly wonderful been looking for it for weeks. Thanks Bob.

Yes, thanks to Bob I now have a nice ajax check in place.

I added an animated gif for the wait process and also added a little style to change the notice to red or green depending on the result - and created another piece to check the users email as well.

Here is my Form HTML on the registration form:

<?php
$script = "window.addEvent('domready', function() {
  $('uname').addEvent('blur', function(e) {
    e = new Event(e).stop();

    // Show the spinning indicator when pressing the submit button...  
    $('indicator1').setStyle('display','block');

    var username = $('uname').value;
    if ( username != '' ) {
      var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&username='+username+'&tmpl=component';

      new Ajax(url, {
        method: 'get',
        onSuccess: parseResult
      }).request();
    }
    function parseResult(request)
    {
      $('indicator1').setStyle('display','none');

      var msg = request.split('##@##');
      $('username_msg').setHTML(msg[1]);
    }

  });
  
    $('email').addEvent('blur', function(e) {
    e = new Event(e).stop();

    // Show the spinning indicator when pressing the submit button...  
    $('indicator2').setStyle('display','block');

    var email = $('email').value;
    if ( email != '' ) {
      var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&email='+email+'&tmpl=component';

      new Ajax(url, {
        method: 'get',
        onSuccess: parseResult
      }).request();
    }
    function parseResult(request)
    {
      $('indicator2').setStyle('display','none');

      var msg = request.split('##@##');
      $('email_msg').setHTML(msg[1]);
    }

  });
  
});";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<style type="text/css">.red{color:red;} .green{color:green;}</style>
 .   .  .

td align="right" width="17%"><label class="cf_label">Email:</label></td>
				<td align="left" width="27%"><input class="cf_inputbox required validate-email" maxlength="150" size="30" id="email" name="email" type="text"><span id="indicator2" style="display: none"><img src="/images/spinner2.gif" alt="checking..." /></span><div id='email_msg' ></div></td>
			</tr>
			<tr>
				<td align="right" width="17%"><label class="cf_label">Username:</label></td>
				<td align="left" width="27%"><input class="cf_inputbox required validate-alphanum" maxlength="150" size="30" id="uname" name="uname" type="text"><span id="indicator1" style="display: none"><img src="/images/spinner2.gif" alt="checking..." /></span><div id='username_msg' ></div></td>
 .    .   .

and then here is the Form HTML on the ajax_form:
(notice: I had to parse the url to know which variable was being sent to me that is why I have the foreach. Also, if I was going to do this for even more fields I would use a switch case inside the foreach instead of the "if")

<?php
$db =& JFactory::getDBO();
$myurl =& JRequest:: geturi();

foreach ($_GET as $key => $val) {

   if ($key == 'username'){
      // username code
		$text =& JRequest:: getString('username');
		$sql = "
			SELECT COUNT(*)
				FROM `#__users`
				WHERE `username` = ".$db->quote($text).";";
		$db->setQuery( $sql );
		echo "##@##";
		if ( $database->loadResult() != 0 ) {
		  echo '<span class="red">Username Already Taken</span>';
		} else {
		  echo '<span class="green">This Username is available</span>';
		}
		echo "##@##";
   }
   elseif ($key == 'email'){
      // email code
		$regemail =& JRequest:: getString('email');
		$sql = "
		    SELECT COUNT(*)
		        FROM `#__users`
		        WHERE `email` = ".$db->quote($regemail).";";
		$db->setQuery( $sql );
		echo "##@##";
		if ( $database->loadResult() != 0 ) {
		  echo '<span class="red">Email Already Taken</span>';
		} else {
		  echo '<span class="green">This email is available</span>';
		}
		echo "##@##";
   }

}
?>

Hope this helps!

Thanks for posting this! 🙂

Regards,
Max

I'm trying to do this for other example, but can't put it to work.

I'm having an event and want people to sign in throw a simple form that sends me a email. This is done.
Now I just want that it checks if the users ID is already submit or not so I don't get double submitions.

I have this:

1. ID
2. name
3. date (date of birthday)
4. email
5. telf

I have a table for this form too.

what i have to do to check if the ID is already in my db?

I've tried all the solutions but don't get any results..
Any ideas'?

Hi sApO_sUicIdA,

Sounds like a good case for server-side validation - there's a box with a simple example on the validation tab.

Add the MySQL/PHP to check the table and return if there is an error.

Bob

Tkx for the quick response.

can u give me a example? I'm just a designer with low knowledge in codding😟

tkx in advance

???

<?php
if($_POST['bi'] != 'bi')
return 'Sorry, but you are already in our data base';
?>

Hi sApO_sUicIdA,

The fix is here

Bob

Hi sApO_sUicIdA,

I think that you can use the PHP code used in the AJAX code earlier to replace the "if" statement in the example you show! please let us know if this is still hard😉

Regards
Max

Heya Folks,

Firstly thanks for those involved in putting this together - very usefull!

I am trying to integrate this into an existing registration form that I am working on. However I have an anomaly that I can't quite pin down. If we look at the quote below, you will see I have commented out the table based form fields from the post in this thread.

edit: removed, fixed below!!

However I have the same fields, with the same ID's in my standard tableless structure as the next segment.

When I uncomment the table, it works perfectly. When I try to use the existing fields (with the same id), I get nothing - is there anything unique to the table ?? I thought I just had to rename the ID's once I had it working!

Cheers,

/Miz

ok, am going to put it down to a typo due to workng at 3:12am!

<div class="form_item">
 <div class="form_element cf_textbox">
  <label class="cf_label" style="width: 150px;">Username:</label>
  <input class="cf_inputbox required validate-alphanum" maxlength="150" size="30" id="uname" name="uname" type="text">
  <span id="indicator1" style="display: none"><img src="/images/spinner2.gif" alt="checking..." /></span>
 <div id='username_msg' ></div>
</div>

works nicely and will fit n with anyone who started with the form editor! 😀

Hi Mizpah,

I'm using this reply to post an updated version of the username & email validator. Using a new feature in ChronoForms and a couple of other little improvements we can make this code much slicker.

For simplicity here I'm just posting the 'username' part of the code. It's easy to extend.

First, we're going to use Json encoding to pass the data back and forth.

Second we're going to use one of the form ExtraCode boxes (ExtraCode 1 here) to avoid having extra forms for the Ajax.

The form HTML is more or less unchanged. I've just simplified your code a little by taking it out of the table

<div><span class="cf_label">AccountName: </span>
<input style="" id="uname" name="uname" class="cf_reg_input" title="" value="" type="text">
<span id="indicator1" style="display: none">
<img src="/images/hourglass.gif" alt="checking..." /></span>
<div id='username_msg'></div>
</div>
<input type='submit' name='submit' value='submit' />

We also need a script in the Form HTML

$('uname').addEvent('blur', function(e) {
	e = new Event(e).stop();
	// Show the spinning indicator when pressing the submit button...
	$('indicator1').setStyle('display', 'block');

	var username = $('uname').value;
	if ( username != '' ) {
  		var url = 'index.php?option=com_chronocontact&chronoformname=test_form_16&task=extra&format=raw';
  		var jSonRequest = new Json.Remote(url, {
  			onComplete: function(r) {
  				$('indicator1').setStyle('display','none');
         		if ( r.username_ok ) {
        			$('username_msg').setHTML(\"<span style='color:green;'>Username '\"+username+\"' is OK</span>\");
        		} else {
        			$('username_msg').setHTML(\"<span style='color:red;'>Sorry, username '\"+username+\"' is already taken</span>\");
        		}
			}
		}).send({'username': username});
	}
});

Note: this could go in the JavaScript box but I prefer to wrap it in a 'domready' event and load into the page header with $doc->addScriptDeclaration()

This script is using the MooTools Json.Remote() function to send the data back to our form. The data sent is {'username': username} - we could have several variables in here.

Note that the url includes &task=extra which tells ChronoForms to pass the request to ExtraCode box 1; and also &format=raw which tells Joomla to *only* send the code we echo - no headers, no template or anything else.

In the Extra Code 1 box (near the bottom of the Form HTML tab) there is are a fwe line sof code to do the actual lookup

<?php
$json = stripslashes($_POST['json']);
$json = json_decode($json);

if ( $json->username ){
    $db =& JFactory::getDBO();
    $query = "
        SELECT COUNT(*)
        	FROM `#__users`
        	WHERE `username` = ".$db->quote($json->username).";";
    $db->setQuery($query);
    $response = (bool) !$database->loadResult();
    $response = array('username_ok' => $response );
    echo json_encode($response);
}
?>

The first two lines get and unpack the json code from out form and convert it into a object.

We then do a simple lookup and send back a json encoded array. Again this will only have one entry either 'username_ok' => true or 'username_ok' => false

Back in the form script we check the value of the response with if ( r.username_ok ) and set a result span depending on the value.

Bob

PS I've kept this pretty simple so that you can seasily see how it works. The code could easily be extended in several ways. The most obvious is to check for the key in the json and use the same code to check for valid emails.

Thank Bob, I am just looking through it now - I am wondering if this will get me closer to a function that I can use with live validation for this!

Somthing like:

change the json responce string to true or false
Remove div references from html for messages
remove the if r= show this part from the html
add a custom variable using function (r) - custom.validate('fieldname', function('fieldname'){message: "I failed!"}); ?

Am off to see what I can cook up!

Hi Mizpah,

What do you want the function to do - just to use the same error messages for the two checks?

Bob

Hi Bob,

I am just looking to check the current state of the ajax responce.

Validate.Custom( 'uname', { against: function(r){ return !(r.username_ok) }, args: {} } );

May be closer - I essentially want to use the existing function, and set a responce value for true, then I can use the normal error responces from livevalidation, and have no need for divs to be shown or hidden other than the hourglass.

ultimately giving somthing like:

$script = "
var uname = new LiveValidation('uname', { 
  validMessage: 'This is a valid username', 
  wait: 500
});
uname.add(Validate.Presence, {
  failureMessage: 'Username must not be blank!'
});
uname.add(Validate.Custom('uname', { against: function(r){
 return !(r.username_ok) }, args: {} } ),
 failureMessage: 'This username is already taken' 
});
uname.add(Validate.Format, {
  pattern: /^[a-zA-Z\-_]{4,16}$/, 
  failureMessage: 'Username must be between 4 and 16 characters' 
});
";

global $mainframe;
if ($mainframe->isSite())
{

$doc =& JFactory::getDocument();
$script = "
window.addEvent('domready', function() {
$script
});

Hopefully that shows the principle, however the above doesn't actually work.  
";
$doc->addScriptDeclaration($script);
};

Is that any clearer ?

Have taken this concept, wrapped it in a better strucured question and posted over at stack overflow - it seems to be trickier than I first thought!

http://stackoverflow.com/questions/1555149/how-do-i-use-the-livevalidation-javascript-library-custom-validation-function

I will update this thread accordingly if I manage to track down a solution!

Hi Mizpah,

I had a play for an hour or so last evening. I think I got close but it wouldn't work. The AJAX function was called on page load but not again after that; and I'm not sure I ever picked up the validation response.

FWIW here's the code I ended up with

var uname = new LiveValidation('uname', {
  	validMessage: 'This is a valid username',
  	wait: 500
});
uname.add( Validate.Presence, {
  failureMessage: 'Username must not be blank!'
});
uname.add(
	Validate.Custom('uname', {
		against: function(value, args) {
			if ( value != '' ) {
				doJson(value);
			}
		},
		args: {},
		failureMessage: 'Username already in use!'
	})
);

function doJson(value)
{
 	var response = null;
	var url = 'index.php?option=com_chronocontact&chronoformname=test_form_17&task=extra&format=raw';
	var jSonRequest = new Json.Remote(url, {
    	onComplete: function(r) {
        		response = r.username_ok;
        		//console.log(response);
        	}
    }).send({'username': value});
    return response;
};

Bob

Heya Bob,

This is harder than I thought!

It seems that:

var uname = new LiveValidation('uname', { 
  validMessage: 'This is a valid username', 
  wait: 500
});
uname.add(Validate.Presence, {
  failureMessage: 'Username must not be blank!'
});
uname.add(Validate.Custom('uname', { against: function(r){
return !(r.username_ok) }, args: {} } ),
failureMessage: 'This username is already taken' 
});
uname.add(Validate.Format, {
  pattern: /^[a-zA-Z\-_]{4,16}$/, 
  failureMessage: 'Username must be between 4 and 16 characters' 
});
";

Should in theory work - however greater minds than mine are telling me its an architecture issue. Apparently livevalidation is looking for an instant responce to the check - however the json request is asynchronous, and there is no responce to the question from livevalidation, at the point that it is made.

I dont know if that sheds any light on things ?

Sheesh, Am going to have a write up a new registration tutorial with all this in if we ever get it working!

ok, I havent attempted this yet however I am told that here are two solutions:

1) You can do uname.disable(); & uname.enable(); to re-run the validation code. So here's a possible approach:
[list]

Have a global variable named 'username_taken'.

On the onchange event, have username_taken be set to 'false'.

Add a validator to uname which simply checks whether username_taken is indeed still false.

On the onblur event, send off a JSON request to the server with an onComplete:-function which sets username_taken to either true or false (depending on what the server said) and then disables and re-enables the uname validation (so it runs again, sees that username_taken changed, and outputs the right message).

[/list]

or - and apparently this is better:

2) Use the 'Observer Pattern' which google says is:

http://www.phpfever.com/the-observer-pattern-oop-techniques-in-php.html

Would love your thoughts Bob/Fredrik or anyone else out there in chronoland!

/Miz

Hi Mizpah,

Interesting, it makes sense that the Ajax delay would throw the LiveValidator.

The Observer pattern already exists effectively in the MooTools addEvent methods - the question is what events to add to . . . ?

Could be that the Ajax sets a hidden field value and then triggers a LiveValidation on that? Or could it perhaps change a class on the input field for the LiveValidation to detect?

Bob

PS There's a quite different (but useful) Observer class that works with the digitarald.de Autocompleter to give some good Ajax effects. Note: You need version 1.0 to work with MooTools 1.1

Heya,

Ok, Using things native to MooTools makes sense to me - but now of course Joomla 1.6 and MooTools 1.2 are around the corner. I am half tempted to switch my J! to MooTools 1.2 and start there - but that would be opening up another a can of worms.

I am getting way behind my estimated timeline here - I am going to complete my registration form (for now) with the ajax/json as it is - its functionaly fine - with livevalidation on every other field. I need to do this in order to be able to populate the db('s) and build the profile managment side for dealers - then link the views of individual cars to include the sales contact details as per the profile of the listing dealer.

Anyway back on topic - I hope to revisit this and implement it fully a little later - for now I have the rest of my functionality to build so I can start on the content / templating parts!

/Miz

Hi Mizpah,

From what I see MooTools 1.2 is quite a big advance on 1.1 and there are some very nice tools out there using it . . .

Max tells me that the Joomla! team have lost some key players and he thinks that development of 1.6 is being quietly pushed back until they regain momentum. I don't know how true that is but I haven't seen many signs of life on 1.6 recently.

From memory you can probably use MooTools 1.2 with Joomla with a few provisos - it may cause problems on the back end; but in the front-end the main problem is with the code for image captions.

Bob

this way work for me.

Yes, thanks to Bob I now have a nice ajax check in place.

I added an animated gif for the wait process and also added a little style to change the notice to red or green depending on the result - and created another piece to check the users email as well.

Here is my Form HTML on the registration form:

<?php
$script = "window.addEvent('domready', function() {
  $('uname').addEvent('blur', function(e) {
    e = new Event(e).stop();

    // Show the spinning indicator when pressing the submit button...  
    $('indicator1').setStyle('display','block');

    var username = $('uname').value;
    if ( username != '' ) {
      var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&username='+username+'&tmpl=component';

      new Ajax(url, {
        method: 'get',
        onSuccess: parseResult
      }).request();
    }
    function parseResult(request)
    {
      $('indicator1').setStyle('display','none');

      var msg = request.split('##@##');
      $('username_msg').setHTML(msg[1]);
    }

  });
  
    $('email').addEvent('blur', function(e) {
    e = new Event(e).stop();

    // Show the spinning indicator when pressing the submit button...  
    $('indicator2').setStyle('display','block');

    var email = $('email').value;
    if ( email != '' ) {
      var url = 'index2.php?option=com_chronocontact&chronoformname=ajax_form&email='+email+'&tmpl=component';

      new Ajax(url, {
        method: 'get',
        onSuccess: parseResult
      }).request();
    }
    function parseResult(request)
    {
      $('indicator2').setStyle('display','none');

      var msg = request.split('##@##');
      $('email_msg').setHTML(msg[1]);
    }

  });
  
});";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<style type="text/css">.red{color:red;} .green{color:green;}</style>
 .   .  .

td align="right" width="17%"><label class="cf_label">Email:</label></td>
				<td align="left" width="27%"><input class="cf_inputbox required validate-email" maxlength="150" size="30" id="email" name="email" type="text"><span id="indicator2" style="display: none"><img src="/images/spinner2.gif" alt="checking..." /></span><div id='email_msg' ></div></td>
			</tr>
			<tr>
				<td align="right" width="17%"><label class="cf_label">Username:</label></td>
				<td align="left" width="27%"><input class="cf_inputbox required validate-alphanum" maxlength="150" size="30" id="uname" name="uname" type="text"><span id="indicator1" style="display: none"><img src="/images/spinner2.gif" alt="checking..." /></span><div id='username_msg' ></div></td>
 .    .   .

and then here is the Form HTML on the ajax_form:
(notice: I had to parse the url to know which variable was being sent to me that is why I have the foreach. Also, if I was going to do this for even more fields I would use a switch case inside the foreach instead of the "if")

<?php
$db =& JFactory::getDBO();
$myurl =& JRequest:: geturi();

foreach ($_GET as $key => $val) {

   if ($key == 'username'){
      // username code
		$text =& JRequest:: getString('username');
		$sql = "
			SELECT COUNT(*)
				FROM `#__users`
				WHERE `username` = ".$db->quote($text).";";
		$db->setQuery( $sql );
		echo "##@##";
		if ( $database->loadResult() != 0 ) {
		  echo '<span class="red">Username Already Taken</span>';
		} else {
		  echo '<span class="green">This Username is available</span>';
		}
		echo "##@##";
   }
   elseif ($key == 'email'){
      // email code
		$regemail =& JRequest:: getString('email');
		$sql = "
		    SELECT COUNT(*)
		        FROM `#__users`
		        WHERE `email` = ".$db->quote($regemail).";";
		$db->setQuery( $sql );
		echo "##@##";
		if ( $database->loadResult() != 0 ) {
		  echo '<span class="red">Email Already Taken</span>';
		} else {
		  echo '<span class="green">This email is available</span>';
		}
		echo "##@##";
   }

}
?>

Hope this helps!

yes working.

add new form (form name is ajax_form) with PHP codes (secod code of this quote) in formdata side.
add to main form first datas of this quotes. (don't forget edit form name if your form name different.