Jump to content

Checking If Input Is Empty After User Editing


Recommended Posts

The idea:The idea is to automatically fill the fields with "user@mail.com" and "password" if they're left blank. The problem:Well, the Javascript check is working and doing what it is supposed to. However, if the user adds a value, and then erases that value leaving the input empty, the script doesn't detects the field as empty... although the value returned is indeed empty like "". The code:

function loginFormToggleFillers(element){  	var loginF = document.loginForm.login;	var user = loginF.value;  	var passwordF = document.loginForm.password;	var password = passwordF.value;  	if(element){		el = element.attributes["name"].value;		if( el == "login" ){			if ( user == "" || user.length == 0 ){				loginF.setAttribute("value", "user@mail.com");			}			if ( user == "user@mail.com" ){				loginF.setAttribute("value", "");			}		  		} else if ( el == "password" ){			if ( password == ""  || password.length == 0 ){				passwordF.setAttribute("value", "password");			}			if ( password == "password" ){				passwordF.setAttribute("value", "");			}		}	} else {		if ( user == "" || user.length == 0){			loginF.setAttribute("value","user@mail.com");		}	  		if ( password == "" || password.length == 0){			passwordF.setAttribute("value","password");		}	}}loginFormToggleFillers(null);

The HTML call (wrote by hand, so there might be a mistake somewhere... but it's just the idea):

<input type="text" name="login" onFocus="loginFormToggleFillers(this)" onBlur="loginFormToggleFillers(this)"  /><input type="password" name="password" onFocus="loginFormToggleFillers(this)" onBlur="loginFormToggleFillers(this)"/>

Any ideas on this? Thanks in advance!

Edited by Kingdom
Link to post
Share on other sites

The first step is to print out the values of the variables that you're checking so that you can verify that the values are what you expect. You may also want to include an alert so you can figure out if it went to the if or the else. You also have a space between "password" and ".length", I'm not sure if that's an error or not. If you're not already checking the error console, make sure you keep an eye there also.

Link to post
Share on other sites

Thanks, that's was just a typo on paste. Fixed! The value returned is indeed what i expect, empty, as i said on the first post. I've added an alert to detect if the script was being triggered, and it is, but the value of the input won't be updated after editing... Here's the new code with detect:

function loginFormToggleFillers(element){  	var loginF = document.loginForm.login;	var user = loginF.value;  	var passwordF = document.loginForm.password;	var password = passwordF.value;  	if(element){		el = element.attributes["name"].value;		if( el == "login" ){			if ( user == "" || user.length == 0 ){	alert("detected");				loginF.setAttribute("value", "user@mail.com");			}			if ( user == "user@mail.com" ){				loginF.setAttribute("value", "");			}		  		} else if ( el == "password" ){			if ( password == "" || password.length == 0  ){	alert("detected");				passwordF.setAttribute("value", "password");			}			if ( password == "password" ){				passwordF.setAttribute("value", "");			}		}	} else {		if ( user == "" || user.length == 0  ){   alert("detected");			loginF.setAttribute("value","user@mail.com");		}	  		if ( password == "" || password.length == 0  ){			passwordF.setAttribute("value","password");		}	}}loginFormToggleFillers(null);

Any other ideas?

Edited by Kingdom
Link to post
Share on other sites

All of those alerts say the same thing, change them so you can tell which direction the execution goes. Are you saying that you see the value of the field change in the browser, but the Javascript code still reports the old value? Instead of using setAttribute, just set the value property directly. At the top you read the value property, but then you set the value attribute. The property and the attribute aren't the same, as strange as it sounds.

Link to post
Share on other sites
Instead of using setAttribute, just set the value property directly. At the top you read the value property, but then you set the value attribute. The property and the attribute aren't the same, as strange as it sounds.
Yep, that fixed it... Swapped .setAttribute("value","password") for .value... Thanks! :DSolved!
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...