Mootools Ajax driven php login help

[Stickybomb]

I am attempteing to modify the login I found at roscripts.com to accomodate my needs.

 

I got it to work fine by validating individually for each error and displaying a message.

 

the mootools and the javascript are working fine, I am having issues with my php code.

 

I would like to simplify and streamline the process so I put all the validations in functions and am adding the error messages to an array.

 

I then test if it has any errors and list them if any are present, but for some reason It does not function.

 

I am trying to implement this into a class I am working on so any help is appriciated

 

working version <- very clutered and not practical

php file

 

new version <- not cluttered and more streamlined, easier to update

php file

 

 

[Stickybomb]

bump

[Stickybomb]

bump anyone?

[MadTechie]

1. i rarey download members files..

2. i kinda like to know the "Problem", its not working is kinda lazy,

[Stickybomb]

firstly its not a download i changed the file to .phps which means you view the code in your browser rather than posting it here its easier to read and faster then copy and paste.

 

second I provided a link to a page with it working and a page with it not. I am not sure of the problem or i could fix it myself. So its kind of difficult to give you more information, how about

 

'nothing happens' the ajax response is either not getting recieved or its not getting what its intended to get. There are no errors displayed!

 

it is designed to validate each field after they loose focus, try clicking in the fields on both examples. The js code is identicall I only changed the php so it has to be a hp problem

[MadTechie]

firstly its not a download i changed the file to .phps which means you view the code in your browser rather than posting it here its easier to read and faster then copy and paste.

erm... LMAO yeah okay..

 

so it doesn't download which means the links inactive..

 

the problem with posting a link is its not part of the forum..

[Stickybomb]

ok i managed to make a little head room I reworked the script a little. I managed to get it to acctually display a response. I seems however either the validation functions are not working properly or at all since no matter what i input into the fields it returns a check mark symbolizing that there were no errors. It may also be that they are working fine and my checking for errors may be causeing a problem, but I can not seem to see the problem myself.

 

here is the php code

<?php
$data = $_GET['data'];

$errors;

//is alphanumeric
function isAlphaNum($input) {
	if(!eregi("^([0-9a-zA-Z])*$", $input)){
		$errors[]='* must only contain alphanumeric characters';
	}			
}

//check if length
function checkLength($input,$max,$min) {
	if($data=='' || strlen(trim($data)) < $min){
		$errors[]='* must be at least '.$min.' characters';
	}

	if($data=='' || strlen(trim($input)) > $max){
		$errors[]='* must can not exceed '.$max.' characters';
	}
}

//check for errors
function isErrors() {
	if (isset($errors) && count($errors) > 0){
		return true;
	}else{
		return false;
	}
}

//list errors
function listErrors($delim = ' '){
	if (isset($errors) && count($errors) > 0){
		return implode($delim,$errors);
	}
}

switch($_GET['field']){

	case'userid':

		checkLength($data,3,255);
		isAlphaNum($data);

		if(isErrors()){
?>
<!--passes errors for display as well as showing a red x symbolizing an error-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconuserid').setStyle('background-position','0 50%');
		$('erruserid').setStyle('visibility','visible').empty().appendText(<?=listErrors();?>);
        });
</script>
<?php
		}else{
?>
<!--displays a green check symbolizing no errors-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconuserid').setStyle('background-position','0 0');
		$('erruserid').setStyle('visibility','hidden').empty();
        });
</script>
<?php
		}

	break;

	case'pass':


		checkLength($data,6,16);
		isAlphaNum($data);

		if(isErrors()){
?>
<!--passes errors for display as well as showing a red x symbolizing an error-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconpass').setStyle('background-position','0 50%');
		$('errpass').setStyle('visibility','visible').empty().appendText(<?=listErrors();?>);
        });
</script>
<?php
		}else{
?>
<!--displays a green check symbolizing no errors-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconpass').setStyle('background-position','0 0');
		$('errpass').setStyle('visibility','hidden').empty();
        });
</script>
<?php
		}

	break;
}
?>

 

this is the page running it

new version

 

[MadTechie]

try this

 

<?php
$data = $_GET['data'];

$errors;

//is alphanumeric
function isAlphaNum($input) {
	global $errors;
	if(!eregi("^([0-9a-zA-Z])*$", $input)){
		$errors[]='* must only contain alphanumeric characters';
	}			
}

//check if length
function checkLength($input,$max,$min) {
	global $errors;
	if($data=='' || strlen(trim($data)) < $min){
		$errors[]='* must be at least '.$min.' characters';
	}

	if($data=='' || strlen(trim($input)) > $max){
		$errors[]='* must can not exceed '.$max.' characters';
	}
}

//check for errors
function isErrors() {
	global $errors;
	if (isset($errors) && count($errors) > 0){
		return true;
	}else{
		return false;
	}
}

//list errors
function listErrors($delim = ' '){
	global $errors;
	if (isset($errors) && count($errors) > 0){
		return implode($delim,$errors);
	}
}

switch($_GET['field']){

	case'userid':

		checkLength($data,3,255);
		isAlphaNum($data);

		if(isErrors()){
?>
<!--passes errors for display as well as showing a red x symbolizing an error-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconuserid').setStyle('background-position','0 50%');
		$('erruserid').setStyle('visibility','visible').empty().appendText(<?=listErrors();?>);
        });
</script>
<?php
		}else{
?>
<!--displays a green check symbolizing no errors-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconuserid').setStyle('background-position','0 0');
		$('erruserid').setStyle('visibility','hidden').empty();
        });
</script>
<?php
		}

	break;

	case'pass':


		checkLength($data,6,16);
		isAlphaNum($data);

		if(isErrors()){
?>
<!--passes errors for display as well as showing a red x symbolizing an error-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconpass').setStyle('background-position','0 50%');
		$('errpass').setStyle('visibility','visible').empty().appendText(<?=listErrors();?>);
        });
</script>
<?php
		}else{
?>
<!--displays a green check symbolizing no errors-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconpass').setStyle('background-position','0 0');
		$('errpass').setStyle('visibility','hidden').empty();
        });
</script>
<?php
		}

	break;
}
?>

[Stickybomb]

hmm first i noticed i had a variable issue in the length function i fixed that with no effect, then i tried implementing the global like you suggested but then it did not even display check mark.  ???

 

the problem doe snot seem to be with the validation functions or the array. i hardcoded a value and still recieved the check marks, which mean the error is some where in the checking or list functions

[MadTechie]

this should do it

 

<?php
$data = $_GET['data'];

$errors;

//is alphanumeric
function isAlphaNum($input) {
	global $errors;
	if(!eregi("^([0-9a-zA-Z])*$", $input)){
		$errors[]='* must only contain alphanumeric characters';
	}			
}

//check if length
function checkLength($data,$max,$min) {
	global $errors;
	if($data=='' || strlen(trim($data)) < $min){
		$errors[]='* must be at least '.$min.' characters';
	}

	if($data=='' || strlen(trim($input)) > $max){
		$errors[]='* must can not exceed '.$max.' characters';
	}
}

//check for errors
function isErrors() {
	global $errors;
	if (isset($errors) && count($errors) > 0){
		return true;
	}else{
		return false;
	}
}

//list errors
function listErrors($delim = ' '){
	global $errors;
	if (isset($errors) && count($errors) > 0){
		return implode($delim,$errors);
	}
}

switch($_GET['field']){

	case'userid':

		checkLength($data,255, 3);
		isAlphaNum($data);

		if(isErrors()){
?>
<!--passes errors for display as well as showing a red x symbolizing an error-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconuserid').setStyle('background-position','0 50%');
		$('erruserid').setStyle('visibility','visible').empty().appendText(<?=listErrors();?>);
        });
</script>
<?php
		}else{
?>
<!--displays a green check symbolizing no errors-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconuserid').setStyle('background-position','0 0');
		$('erruserid').setStyle('visibility','hidden').empty();
        });
</script>
<?php
		}

	break;

	case'pass':


		checkLength($data,16,6);
		isAlphaNum($data);

		if(isErrors()){
?>
<!--passes errors for display as well as showing a red x symbolizing an error-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconpass').setStyle('background-position','0 50%');
		$('errpass').setStyle('visibility','visible').empty().appendText(<?=listErrors();?>);
        });
</script>
<?php
		}else{
?>
<!--displays a green check symbolizing no errors-->
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('iconpass').setStyle('background-position','0 0');
		$('errpass').setStyle('visibility','hidden').empty();
        });
</script>
<?php
		}

	break;
}
?>

[emehrkay]

what are you trying to do? just have something show up onblur of the form fields? or handle the login process through an ajax call ?

 

 

[Stickybomb]

@emehrkay:

 

basically onblur it ill validate if it fails it will display a red x and a red field contianing errors, if it passes it will display a green check mark.

 

I have it working in the first post you can see it working, I am just trying to fix my php code to be more efficient by using functions and what not.

 

 

 

@MadTechie:

 

no it still does not seem to work. I am certain that the globals are not nessecary. like I stated the problem seems to be in the last two functions.

[MadTechie]

Humm.. i tested it and it works for me!

well the php, side not sure about the js or html

[emehrkay]

I would suggest that you validate on submit of the form, the onblur effect looks cool but a lot of webusers tab and enter to submit webforms so the second field will never blur...

 

do this

 

window.addEvent.('domready', function(){
	var form = $('form_id');
	var url = 'whatever.php?' + form.toQueryString();
	form.addEvent('submit', function(e){
		e = new Event(e).stop();
		new Ajax(url,{
			onComplete : function(result){
				//handle responsehere
				// if everything checks out do a location = '' call
			}
		});		
	});	
});

 

in your serverside code just run checks against all of the fields. return an associated array

echo $('field_id' => 'image loc' ... 'status' => 'error');

 

inside the onComplete: do a for in loop

 

for(x in result){
if(x == 'status'){
...
}else{
if($(x)) //place image using result[x] 
}
}

[Stickybomb]

@emehrkay:

hmm well i will be validating on submit as well this is merely an additionall method of assistence for the users to get the data correct. I am not going to be using it on all fields only specific ones mainly for registration checking if a user exsists or formating of the username and password etc...

 

so thanks for your assistence but I need to perfect this method

 

 

@MadTechie:

this is my implmentation of it, you can see for yourself how it runs, or does not rather

here

[MadTechie]

I assume you chaged the $_GET to $_POST for one

[emehrkay]

I would suggest that you do not return JavaScript to be evaluated - very dangerous. and using a blur method for checking if the username exists is leaving yourself wide open for hacking. I can run a bot that will check every possible name then once it finds one, do the same for password

[Stickybomb]

ok hmm that does not sound good. How exactly would they get the password, as long as its encrypted and I am not testing weather it already exsists? do you have a suggestion of a secure way to do this dynamically without having to submit first?

 

and i tried it as get and post, get gives me js errors

[Stickybomb]

bump