CODEWITHSUNDEEP
javascript
tryurbest
tryurbest

Reputation: 1429

Returning a boolean value in a JavaScript function

I am doing a client side form validation to check if passwords match. But the validation function always returns undefined.

function validatePassword(errorMessage)
{
   var password = document.getElementById("password");
   var confirm_password = document.getElementById("password_confirm");

   if(password.value)
   {
      // Check if confirm_password matches
      if(password.value != confirm_password.value)
      {
         return false;
      }
   }
   else
   {
      // If password is empty but confirm password is not
      if(confirm_password.value)
      {
         return false;
      }
   }
   return true;
}

Please note that the validatePassword is called from a member function of the Form object.

function Form(validation_fn)
{
   // Do other stuff
   this.submit_btn = document.getElementById("submit");
   this.validation_fn = validation_fn;
}

Form.prototype.submit = funciton()
{
   var result;
   if(this.validation_fn)
   {
      result = this.validation_fn();
   }

   //result is always undefined
   if(result)
   {
       //do other stuff
   }
}

Upvotes: 25

Views: 236189

Answers (5)

Rajnish
Rajnish

Reputation: 54

If we don't return anything explicitly, Javascript functions implicitly returns 'undefined'. In the below code, one condition is not returning anything, which is causing it to return undefined. I have mentioned this in the code comments.

function validatePassword(errorMessage)
{
   var password = document.getElementById("password");
   var confirm_password = document.getElementById("password_confirm");

   if(password.value)
   {
      // Check if confirm_password matches
      if(password.value != confirm_password.value)
      {
         return false;
      }
     //Here a return statement is missing
   }
   else
   {
      
      if(confirm_password.value)
      {
         return false;
      }
  // Here a return statement is missing
   }
   return true;
}

Upvotes: -1

Alex Harwood
Alex Harwood

Reputation: 74

An old thread, sure, but a popular one apparently. It's 2020 now and none of these answers have addressed the issue of unreadable code. @pimvdb's answer takes up less lines, but it's also pretty complicated to follow. For easier debugging and better readability, I should suggest refactoring the OP's code to something like this, and adopting an early return pattern, as this is likely the main reason you were unsure of why the were getting undefined:

function validatePassword() {
   const password = document.getElementById("password");
   const confirm_password = document.getElementById("password_confirm");

   if (password.value.length === 0) {
      return false;
   }

   if (password.value !== confirm_password.value) {
      return false;
   }
  
   return true;
}

Upvotes: 2

kta
kta

Reputation: 20110

Don't forget to use var/let while declaring any variable.See below examples for JS compiler behaviour. 

function  func(){
return true;
}

isBool = func();
console.log(typeof (isBool));   // output - string


let isBool = func();
console.log(typeof (isBool));   // output - boolean

Upvotes: 2

Sunny Patel
Sunny Patel

Reputation: 616

You could wrap your return value in the Boolean function

Boolean([return value])

That'll ensure all falsey values are false and truthy statements are true.

Upvotes: 8

pimvdb
pimvdb

Reputation: 154818

You could simplify this a lot:

  • Check whether one is not empty
  • Check whether they are equal

This will result in this, which will always return a boolean. Your function also should always return a boolean, but you can see it does a little better if you simplify your code:

function validatePassword()
{
   var password = document.getElementById("password");
   var confirm_password = document.getElementById("password_confirm");

   return password.value !== "" && password.value === confirm_password.value;
       //       not empty       and              equal
}

Upvotes: 18

Related Questions