Page 1 of 1

Retrieve Form Elements BGColor [SOLVED]

Posted: Mon Oct 25, 2010 2:01 pm
by vikkman
I have this code:

Code: Select all

<script type='text/Javascript'>
function validate($element, $min, $empty)
{
	$element.style.backgroundColor = (($element.value.length < $min) ? 'red' : 'green');
}
</script>

<form action='register.php' method='POST'>
<table border='0' cellspacing='0' cellpadding='2'>
<tr><td>Username:</td><td><input onkeyup="validate(this, 4, 0);" type='text' name='username' maxlength='16' size='16'></td></tr>
<tr><td>Password:</td><td><input onkeyup="validate(this, 4, 0);" type='password' name='password' maxlength='16' size='16'></td></tr>
<tr><td>E-mail:</td><td><input onkeyup="validate(this, 6, 0)" type='email' name='email' maxlength='32' size='16'></td></tr>
<tr><td></td><td><div style='border:1px solid #ff9933;padding:1px;width:58px;height:12px;'><input type='submit' name='submit' value='Register' class='submit' style='border:0px;margin-top:-1px;margin-bottom:-1px;'></div></td></tr>
</table>
</form>
It preety much does what i want it to do: if lenght < $min -> red background / else green background, but it bugs me. If i write something inside the input and the delete it with backspace, the background stays red. how can i make it: lenght=0 -> black, lenght <$min && lenght !=0 -> red, lenght > $min -> green.
Also... can anyone show me an example of how to retrieve the background color of certain input fields ( username, password, email ) after _POST to check if they are green and if so -> validation successfull... i've been trying to do that for the past 6 hours.... any1?

Re: JS Validate - Retrieve Form Elements BG Color

Posted: Mon Oct 25, 2010 5:33 pm
by pickle
Once you get into 3 possible values, ternary operators start to look real ugly.

I'd suggest just doing a series of if() conditions to determine the background colour.

Re: JS Validate - Retrieve Form Elements BG Color

Posted: Tue Oct 26, 2010 10:00 am
by vikkman
Ok i managed to make it work at the validation part of each input, but now i'm having problems at onsubmit validation:

Code: Select all

<script type='text/Javascript'>
var alphanumeric = /^([a-zA-Z0-9]+)$/;
var alphanumeric2 = /^([a-zA-Z0-9@.]+)$/;
function validate($element)
{
	switch($element.name)
	{
		case 'username' :{$element.style.backgroundColor = (($element.value.length == 0) ? 'black' : (($element.value.length < 4 && $element.value.length > 0 || !$element.value.match(alphanumeric)) ? 'red' : 'green'));}break;
		case 'password' :{$element.style.backgroundColor = (($element.value.length == 0) ? 'black' : (($element.value.length < 4 && $element.value.length > 0 || !$element.value.match(alphanumeric)) ? 'red' : 'green'));}break;
		case 'email' 	:{var monkeytail = $element.value.indexOf('@');var dot = $element.value.indexOf('.');$element.style.backgroundColor = (($element.value.length == 0) ? 'black' : (($element.value.length < 8 && $element.value.length > 0 || monkeytail == -1 || dot == -1 || !$element.value.match(alphanumeric2)) ? 'red' : 'green'));}break;
	}
}
function check($element)
{
	var monkeytail = $element.email.value.indexOf('@');
	var dot = $element.email.value.indexOf('.');
	if($element.username.value.length < 4 || !$element.username.value.match(alphanumeric) || $element.password.value.length < 4 || !$element.password.value.match(alphanumeric) || $element.email.value.length < 8 || !$element.email.value.match(alphanumeric2) || monkeytail == -1 || dot ==  -1){return false;}
	return true;
}
</script>
<?php
if(isset($_POST['submit']))
{
	echo 'Registration finished!';
} else { ?>
<form action='register.php' method='POST' name='register' onSubmit="javascript : return check(this);">
<table border='0' cellspacing='0' cellpadding='2'>
<tr><td>Username:</td><td style='position:relative;'><input onKeyUp="validate(this);" type='text' name='username' maxlength='16' size='16'><span class='hint'>Alphanumeric characters only.<br>Between 4-16 characters.<br>Must not contain '_' character.<span class='pointer'><br></span></span></td></tr>
<tr><td>Password:</td><td style='position:relative;'><input onKeyUp="validate(this);" type='password' name='password' maxlength='16' size='16'><span class='hint'>Alphanumeric characters only.<br>Between 4-16 characters.<br>Must not contain '_' character.<span class='pointer'><br></span></span></td></tr>
<tr><td>E-mail:</td><td style='position:relative;'><input onKeyUp="validate(this);" type='email' name='email' maxlength='32' size='16'><span class='hint'>Must be a valid email address.<br>Between 8-32 characters.<br>Must contain '@' '.' characters.<span class='pointer'><br></span></span></td></tr>
<tr><td></td><td><div style='border:1px solid #ff9933;padding:1px;width:58px;height:12px;'><input type='submit' name='submit' value='Register' class='submit' style='border:0px;margin-top:-1px;margin-bottom:-1px;'></div></td></tr>
</table>
</form>
<?php } ?>
I aim towards it canceling the submit action if the form has invalid values... but even if i input invalid values, it still submits it.. and 'Registration finished!' appears.

LE: Fixed it.