[SOLVED] mootools ajax login validation help pls.

[Stickybomb]

ok so i am making a php login system and I am wanting to use mootools to check for problems before processing the login.

 

basically I have a div to contain any errors. I wan it to be collapsed, but if there are errors have it expand and append the returned error msgs to it.

 

I know what I am doing as far as the php goes but Im not really up on mootools and would like some help.

 

this is what i have so far

 

my login template:

<script type="text/javascript">
window.addEvent.('domready', function(){
	$('errors').setStyle('visibility','hidden').empty()
	var form = $('loginForm');
	var url = 'inc/process/validate.php?' + form.toQueryString();
	form.addEvent('submit', function(e){
		e = new Event(e).stop();
		new Ajax(url,{
			evalScripts: true,
		});		
	});	
});
</script>
<div id="errors"></div>
<form method="post" id="loginForm" action="index.php?section=process&action=login">
	<table align="center" cellpadding="2" cellspacing="0" bgcolor="#FFFFFF">
		<tr>
			<td width="120">
				<div align="left"><strong>
					<label for="userid">UserID:</label>
				</strong></div>
			</td>
			<td>
				<div align="left" class="string">
					<input name="userid" type="text" class="input" id="userid" value="" size="32" />
				</div>
			</td>
		</tr>
		<tr>
			<td width="120">
				<div align="left"><strong>
					<label for="pass">Password:</label>
				</strong></div>
			</td>
			<td>
				<div align="left">
					<input name="pass" type="password" class="input" id="pass" value="" size="32" />
				</div>
			</td>
		</tr>
		<tr>
			<td width="120">
				<div align="left"><strong>
					<label for="pass">Remember me:</label>
				</strong></div>
			</td>
			<td>
				<div align="left">
					<input name="remember" type="checkbox" id="remember" value="" />
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="3">
				<div align="right">
					<input type="image" name="submit" id="submit" class="submit-btn" src="http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" />
				</div>
			</td>
		</tr>
	</table>
</form>

 

the validation script:

<?php
require_once('../validator.php');
$validate 	= new Validator;

//get posted variables
$user 		= $_POST['userid'];
$pass 		= $_POST['pass'];
$remember 	= isset($_POST['remember']) ? $_POST['remember'] : unchecked;

//check if empty
$validate->validateGeneral($user, "* You must enter a UserID<br /><br />");
$validate->validateGeneral($user, "* You must enter a Password<br /><br />");

//check length minimums
$validate->validateMinLen($user, '3', "* UserID must be at least 3 characters<br /><br />");
$validate->validateMinLen($pass, '6', "* Password must be at least 6 characters<br /><br />");

//check length maximums
$validate->validateMaxLen($user, '30', "* UserID can not be more than 30 characters<br /><br />");
$validate->validateMaxLen($pass, '16', "* Password can not be more than 16 characters<br /><br />");

//check for password format
$validate->validateNumber($pass, "* Your Password must contain at least 1 letter and 1 number toataling 6-16 characters in length.<br /><br />");
//$validate->validateTextOnly($pass, "* Your Password muct contain at least 1 letter and 1 number toataling 6-16 characters in length.<br />");

if($validate->foundErrors()){
?>
<script type="text/javascript">
	window.addEvent('domready', function(){
		$('errors').setStyle('visibility','visible').empty().appendText('<?php $validate->listErrors('<br />'); ?>');
        });
</script>
<?php
}else{

echo "<meta http-equiv='refresh' content='5;url=index.php?section=process&action=login&userid=".$user."&pass=".$pass."&remember=".$remember."&".strip_tags(session_id());

}
?>

 

basically the way my validation class works is that for every check that i run it adds the specified error msg to an error error if it fails validation. I then do a check if the array contains anything and list each of the values.

 

My problems:

 

how do i set the div to be collapsed and not visible initally. then if there are errors make it expand and add the errors. if no make it go on to process the login.

 

any help with this please

[fenway]

A div with no content will automatically "collapse", unless you give it fixed height/width.

[Stickybomb]

I mean like slidein and slideout effect for mootools. Also a div has a set height if you apply a background color to it you can see it with no content.

[fenway]

Also a div has a set height if you apply a background color to it you can see it with no content.

Since when?

[cursed]

Also a div has a set height if you apply a background color to it you can see it with no content.

Since when?

 

 

ditto.

 

can u show an example of a div with a bg-image with no content/no width-height