Retrieve Form Elements BGColor [SOLVED]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
vikkman
Forum Newbie
Posts: 2
Joined: Mon Oct 25, 2010 1:55 pm

Retrieve Form Elements BGColor [SOLVED]

Post 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?
Last edited by vikkman on Tue Oct 26, 2010 11:02 am, edited 2 times in total.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: JS Validate - Retrieve Form Elements BG Color

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
vikkman
Forum Newbie
Posts: 2
Joined: Mon Oct 25, 2010 1:55 pm

Re: JS Validate - Retrieve Form Elements BG Color

Post 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.
Post Reply