Fading imput button based on javascript validation

Flames · September 29, 2008

Is it possible that when you first open a page with a form the input button is faded and has a text of please fill in the form or something like that, and when you fill in the form following validation it makes the input button usable?

e.g. code for the email validation, when triggered will cause an alert box but i want it if its ok the box to go green and the input button to work if other validation is met

<script type="text/javascript">
function emailvalidation(entered, alertbox)

{

with (entered)

{

apos=value.indexOf("@");

dotpos=value.lastIndexOf(".");

lastpos=value.length-1;

if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)

{if (alertbox) {alert(alertbox);} return false;}

else {return true;}

}

}
</script>

this is called by the

onChange="emailvalidation(this,'Email is invalid'")"

any help?

xtopolis · September 30, 2008

you set the DISABLED attribute for the input

document.form1.inputname.disabled=false

Flames · September 30, 2008

so im guessing that form1 is the form name?

and also is there a way to not make an alert box but make the cell background go red and go green if its right?

Thanks for the help

xtopolis · September 30, 2008

Here's a small example:

<html>
<head>
<script type="text/javascript">
function validate(what)
{
  if(what.value == 'cat'){
      document.myForm.mySubmit.disabled=false;
      document.myForm.myField.style.backgroundColor='green';
  }else{
    document.myForm.mySubmit.disabled=true;
    document.myForm.myField.style.backgroundColor='red';
  }
}
function check()
{
  if(document.getElementById('myField') == 'cat'){
    return true;
  }
}
</script>
</head>
<body>

<form onsubmit="return check()" name="myForm" action="index.html" method="post">
  <input type="text" id="myField" onkeyup="validate(this)" /><br />
  <input type="submit" id="mySubmit" DISABLED />
</form>

</body>
</html>

Flames · September 30, 2008

Thank you so much, i tried the code made some adjustments and it works perfectly.

edit: i used document.write to show the error e.g. email invalid and so i could do it for other fields but instead it changes the page to "email invalid" more advice?

xtopolis · September 30, 2008

I think you should change the innerHTML of a div instead. Document.write will overwrite the page, you'd have to create new text element nodes.. easier to replace innerHTML.

Flames · September 30, 2008

inner html can i have an example or a link or something?

xtopolis · September 30, 2008

<html>
<head>
<script type="text/javascript">
  function changeText(what)
  {
    var x = document.getElementById(what);
    x.innerHTML='New text';
  }
</script>
</head>
<body>
<div id="myDiv">
  Old text
</div>
<button onclick="changeText('myDiv')">Test</button>
</body>
</html>

Flames · October 2, 2008

Well i wrote the code below and before it was working but after adding adjustments it sort of stopped working, i dont know why i counted the brackets and the {} but i cant find it.

<html>
<head>
<title>
- Registration
</title>
<script type="text/javascript">
function emailvalidation(entered, emailtext)
{
with(entered)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
{
document.regform.register.disabled=true;
document.regform.email.style.backgroundColor='red';
var x = document.getElementById(emailtext);
x.innerHTML='Your email is invalid!';

}
else
{
document.regform.register.disabled=false;
document.regform.email.style.backgroundColor='lime';
var x = document.getElementById(emailtext);
x.innerHTML='Your email fits validation, but it need to be valid for activation!';
}
}
}

function username(entered,usertext)
{
with(entered)
{
var username = entered.length;
if (username < 5)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById(usertext);
x.innerHTML='Username Too Short';

}
elseif (username > 30)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById(usertext);
x.innerHTML='Username Too Long';

}
else
{
document.regform.register.disabled=false;
document.regform.user.style.backgroundColor='lime';
var x = document.getElementById(usertext);
x.innerHTML='Username Valid \(May be taken\)';
}
}
}

function pass(password, passtext)
{
with(password)
{
passwordlength = password.length
if(passwordlength > 30)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById(passtext);
x.innerHTML='Password Too Long';
}
elseif(passwordlength < 5)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById(passtext);
x.innerHTML='Password Too Short';
}
else
{
document.regform.register.disabled=false;
document.regform.user.style.backgroundColor='lime';
var x = document.getElementById(passtext);
x.innerHTML='Password Valid';
}
}
}

function pass2(password2, pass2text)
{
with(password2)
{
if(document.regform.pass != password2)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById(pass2text);
x.innerHTML='Passwords Must Match';
}
else
{
document.regform.register.disabled=false;
document.regform.user.style.backgroundColor='lime';
var x = document.getElementById(pass2text);
x.innerHTML='Passwords Match';
}
}
}
</script>
</head>
<body>
<center>
Use the form below to register at  <br>
<form action = "reg_info.php" method = "post" name="regform">
<input type = "hidden" name = "reg258741" value = "reg258741">
Desired Username: <input type = "text" size = 20 name = "user" id="user" onChange="username(this,usernametext);"><div id="usernametext">Username between 5-32 characters.<br>
Desired Password: <input type = "password" size = 20 name ="pass" onChange="pass(this,passtext)"><div id="passtext">Password between 5 - 30 characters</div><br>
Repeat Password: <input type = "password" size = 20 name = "pass2" onChange="pass2(this,pass2text)"><div id="pass2text">Password must match with before</div><br>
Email: <input type = "text" size = 20 name = "email" id="email" onChange="emailvalidation(this,emailtext);"><div id="emailtext">Your email must be valid!</div><br>
<input type = "submit" id="register"value = "Register!" DISABLED>
</form>
</center>
</body>
</html>

this isnt an error but i realised a problem with this is when one piece of validation is activated you get the input button activating so i cant check that each one is filled in onSubmit because you can fill it in in order

xtopolis · October 2, 2008

Your code looks like VB code lol? Am I right?

Use firefox to debug your javascript. Tools->Error Console (click clear, then go to your page, and hit refresh, see what comes up. fix the errors.. test things, clear console, refresh test more, see what comes up)

The errors I saw off the bat:

elseif needs to be else if (with a space)

the second thing is that when you try to pass "this", it doesn't pass the way you think it would, because the this it sends refers to the scope of your function being called, where this is now == the browser window, not the element. A solution would be to pass an "event" and then take the id that way. READ ABOUT THIS and JAVASCRIPT: http://www.quirksmode.org/js/this.html <-- excellent article

Here's some handy cross browser code I read about/borrowed/wrote for passing events to get similar info like "this":

//##
//For your topic, you primarily want the e.target element.
// And I think you would get the element by doing:
// 
// var x = e.target.id;  or something similar.

//MouseEvent gather same relevant data for multiple browswers
function MouseEvent(e)
{
  if(e) {
    this.e = e;
  }else{
    this.e = window.event;
  }
  
  if(e.pageX) {
    this.x = e.pageX;
  }else{
    this.x = e.clientX;
  }
  
  if(e.pageY) {
    this.y = e.pageY;
  }else{
    this.y = e.clientY;
  }
  
  if(e.target) {
    this.target = e.target;
  }else{
    this.target = e.srcElement;
  }
}

Use:

function displayToolTip(e,msg)
{
  var e = new MouseEvent(e);
}

<a href="javascript: void(0);" onmouseover="return displayToolTip(event,'We even named them!')" />

Taken from a website I helped write: http://www.aionsky.com

Feel free to look at the source for clarification.

Flames · October 2, 2008

well i put the spaces in between elseif and amazingly the username and email functions now work!

Still having problems, everything gives me this error below. (email gives it once for invalid and once for valid)

Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
Source File: http://*/user/register.php
Line: 1

the username function comes up with this and never goes red, it always goes lime.

Error: x is null
Source File: http://*/user/register.php
Line: 58

the password function, text box doesnt change colour

Error: pass is not a function
Source File: http://*/user/register.php
Line: 1

Check password function, text box doesnt change colour.

Error: pass2 is not a function
Source File: http://*/user/register.php
Line: 1

email function gives this (valid/invalid)

Error: x is null
Source File: http://*/user/register.php
Line: 19

Error: x is null
Source File: http://*/user/register.php
Line: 27

And all divs dont change text (also as a sidenote divs automatically create new paragraphs, is there a way around this)

xtopolis · October 2, 2008

Try taking out everything from the form and javascript, and add them one by one: one input, one function, to see where it breaks.

Go through that, it will be easier then trying to debug it as a whole. If you still have trouble, you'll have to post your code again.. but try to fix stuff before posting a whole page of code. Remember what I said about "this" being passed. You can pass the id name instead of "this" as an argument.

Flames · October 2, 2008

i think i know why its not working for the divs and why the email gets that error though the colours work.

i think its because it cant find the divs because it gives the error x is null, when i got rid of the whole (this, emailtext) and left it as (this) it began to say error use .getElementById() and give the line number which says var x = document.getElementById(emailtext); but i dont get why it says that when i have used the .getElementById() function?

xtopolis · October 2, 2008

did you use quotes?

onchange="funcname(this,'emailtext')"

function funcname(obj,div)

{

var x = document.getElementById(div);

}

Try it, then if not, post the page here

Flames · October 3, 2008

The single quotes seem to have made the divs work, but still problems exist:

Username and Password functions cant check length and always end up valid.

Check Password function always ends up invalid.

Code:

<html>
<head>
<title>
Registration
</title>
<script type="text/javascript">
function emailvalidation(entered)
{
with(entered)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
{
document.regform.register.disabled=true;
document.regform.email.style.backgroundColor='red';
var x = document.getElementById('emailtext');
x.innerHTML='Your email is invalid!';

}
else
{
document.regform.register.disabled=false;
document.regform.email.style.backgroundColor='lime';
var x = document.getElementById('emailtext');
x.innerHTML='Your email fits validation, but it need to be valid for activation!';
}
}
}

function username(entered)
{
with(entered)
{
var username = entered.length;
if (username < 5)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById('usernametext');
x.innerHTML='Username Too Short';

}
else if (username > 30)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById('usernametext');
x.innerHTML='Username Too Long';

}
else
{
document.regform.register.disabled=false;
document.regform.user.style.backgroundColor='lime';
var x = document.getElementById('usernametext');
x.innerHTML='Username Valid (May be taken)';
}
}
}

function password(entered)
{
with(entered)
{
passwordlength = entered.length
if(passwordlength > 30)
{
document.regform.register.disabled=true;
document.regform.pass.style.backgroundColor='red';
var x = document.getElementById('passtext');
x.innerHTML='Password Too Long';
}
else if(passwordlength < 5)
{
document.regform.register.disabled=true;
document.regform.pass.style.backgroundColor='red';
var x = document.getElementById('passtext');
x.innerHTML='Password Too Short';
}
else
{
document.regform.register.disabled=false;
document.regform.pass.style.backgroundColor='lime';
var x = document.getElementById('passtext');
x.innerHTML='Password Valid';
}
}
}

function password2(entered)
{
with(entered)
{
if(document.regform.pass != entered)
{
document.regform.register.disabled=true;
document.regform.pass2.style.backgroundColor='red';
var x = document.getElementById('pass2text');
x.innerHTML='Passwords Must Match';
}
else
{
document.regform.register.disabled=false;
document.regform.pass2.style.backgroundColor='lime';
var x = document.getElementById('pass2text');
x.innerHTML='Passwords Match';
}
}
}
</script>
</head>
<body>
<center>
Use the form below to register at <br>
<form action = "reg_info.php" method = "post" name="regform">
<input type = "hidden" name = "reg258741" value = "reg258741">
Desired Username: <input type = "text" size = 20 name = "user" id="user" onChange="username(this);"><div id="usernametext">Username between 5-32 characters.</div><br>
Desired Password: <input type = "password" size = 20 name ="pass" onChange="password(this)"><div id="passtext">Password between 5 - 30 characters</div><br>
Repeat Password: <input type = "password" size = 20 name = "pass2" onChange="password2(this)"><div id="pass2text">Password must match with before</div><br>
Email: <input type = "text" size = 20 name = "email" id="email" onChange="emailvalidation(this);"><div id="emailtext">Your email must be valid!</div><br>
<input type = "submit" id="register"value = "Register!" DISABLED>
</form>
</center>
</body>
</html>

xtopolis · October 3, 2008

Line 96, first if() of the password2 function was not comparing the correct things... you were asking it to compare html objects, not their values

I added .value to both, and now it works.

if(document.regform.pass.value != entered.value)

Flames · October 3, 2008

Thats fixed the password2 function, but ive still got 2 problems.

Username and Password lengths are always valid am i comparing the wrong things there?

When one piece of validation is correct its enables the submit button. e.g. if you dont put a username, password, or check password, and correctly fill in email you can press the button.

xtopolis · October 3, 2008

Add .value btwn it, and length, this is exactly the same thing as i posted before. You are referring to the HTML object, not it's content.

use alert boxes to help you see.

alert(entered);

vs

alert(entered.value);

Change the two lines to have value in the middle

var username = entered.value.length;
passwordlength = entered.value.length

As for the email being the gatekeeper to the form, have it check the other fields as well, and only if they are all valid, then turn on the button. The way you have it now, is not exactly how I would do it, and is rather confusing to me. But you need to just write in code to tell it to do exactly what you want.

Flames · October 3, 2008

Thanks thats perfect i was putting .value in the wrong place i had entered.length.value as one of my tests which didnt work. Thanks for all the help, but you said the way i have it now isnt how you would do it.

So how exactly would you do it then?

xtopolis · October 3, 2008

Well, your programming style is not familiar to me.. you have things like "with(entered)" that I don't really use.. but that's just a different of style I think. That's why I made the VB comment.. the only time I've used "with" was when I took a VB class... but it maybe just be due to my inexperience.

As for how I would do it:

1)Don't worry about enabling/disabling the submit button. It's confusing, and pointless. A user doesn't have to use your form to submit values to your page.

2)Attach the whole validation to the "onsubmit" attribute of the form:

<form action="reg_info.php" method="post" onsubmit="return validate()">

<script type="text/javascript">
function validate()
{
  var ready = true;
  var errors = array();
  //perform validations
  //if any validations fail, set ready = false, and add an error to the array


  if(ready) { return true;} // form worked, no errors, submit it

  //do some x.innerHTML = error messages here..
  return false; // default to not submit the form
}

}</script>

3)A key thing you should keep in mind. Javascript is not to be used for validation. Sure you can use it for hinting (like you are--passwords must match, username must be a certain length, etc). BUT PHP SHOULD RE-VALIDATE ALL THOSE VALUES.

This is simply because I can make a form on my website with the same fields, but no javascript/ or just turn javascript off and use your site, and submit the data anyway.. bypassing any validation you have.

Flames · October 5, 2008

Everything on the php/server side all has validations but i want to use JS validation to make it easier not to keep swapping pages and because server side if a username/email is in use it will still say the data was inputted correctly and then after it comes up with a nasty mysql error.

Thanks for all your help.

Sign In

Fading imput button based on javascript validation

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information