JS variable scoping

[TechBoyJK]

I'm working on a form validation script. I tried some of the prebuilt validation scripts out there, but they didn't behave how I wanted, so I'm making one from scratch. For the most part it's working smooth, but I think I might have a misunderstanding of how variables are scoped and the best way to declare them.

Please keep in mind my code below is 'paraphrased' and stripped so only relevant lines are used.

In the beginning of the script, I declare error vars for each field, and each respective possible error. For instance, I have error vars for if the password entered is too short or too long. I start by declaring them equal to '0' and if later in the script, an error is determined, it is set to '1'. Finally, I have a section that makes sure all error vars are 0 before submitting form.

$(document).ready(function() {
			
 var $registerPasswordBlankError = 0;
 var $registerPasswordShortError = 0;					
 var $registerPasswordLongError = 0;					
 var $registerPasswordMatchError = 0;

In this segment, when the users changes focus away from the password field, I get the value of the password form element, and first check to see if it's blank. If it is, I set the '$registerPasswordBlankError' equal to '1'. If it is not blank, I then check to see if it's less than 4 characters. If it is not blank but is less than 4 characters, I set the '$registerPasswordShortError' equal to 1.

The problem is, since the code doesn't declare the 'registerPasswordShortError' in the focusOut function, it seems that the var is unDefined, even though I defined it earlier in the script.

In other words, even though Ive declared the error vars in the beginning of the script, the focusout function doesn't know about them and sees them as unDefined if I try to reference them without again declaring them.

$('#registerPassword').on('focusout', function() {
				
  var checkregisterPassword=$(this).val();
				
  if(checkregisterPassword == ''){var $registerPasswordBlankError = 1;}
						
  else {
    var $registerPasswordBlankError = 0; 
	
    if(checkregisterPassword.length < 4) {var $registerPasswordShortError = 1;}
						
    else {var $registerPasswordShortError = 0;}
  }

  }

Simply put, even though I declared '$registerPasswordShortError' earlier in the script, if it's not declared again within the focusOut function, and I try and reference it with:

'alert($registerPasswordShortError);'

The popup will say 'undefined' even though I set it to 0 earlier.

 

[Markbnj]

I think the issue is that you keep repeating the var keyword, which is creating a new declaration. You only need var where you declare the variable.

 

[TechBoyJK]

I think the issue is that you keep repeating the var keyword, which is creating a new declaration. You only need var where you declare the variable.

Boom! Moneyshot. THANKS!

I actually just had this revelation by making a smaller script that only included the features I needed to make it work or break. I got it to work by removing 'var' from all of the declarations except the first one. I hadn't experimented further, so your input backs that up. Thanks!

 

[Markbnj]

Boom! Moneyshot. THANKS!

I actually just had this revelation by making a smaller script that only included the features I needed to make it work or break. I got it to work by removing 'var' from all of the declarations except the first one. I hadn't experimented further, so your input backs that up. Thanks!

No problem. Javascript scoping is tricky, and if you're going to be doing much of it then it will pay to get a really good understanding up front. It will save you a ton of headaches. I once debugged an app where a bunch of experienced developers had created dozens of javascript files with intricate namespacing, all of it done wrong, such that it added _every_ declaration in all of the scripts to the window object. You want to avoid that crap 🙂.

 

[beginner99]

Validating passwords in JS is pretty useless. You know it can be turned off and you must validate them on the server anyway so why duplicate the effort?

 

[Markbnj]

Validating passwords in JS is pretty useless. You know it can be turned off and you must validate them on the server anyway so why duplicate the effort?

Agreed in general, although a lot of sites use a combination of client- and server-side validation. You can certainly omit the former, if you like, but obviously not the latter.

 

[TechBoyJK]

Validating passwords in JS is pretty useless. You know it can be turned off and you must validate them on the server anyway so why duplicate the effort?

It's part of the UI experience.

When the actual form data is passed via Json, there are server side checks done as well.