Fix .value = undefined javascript

Question

I'm trying to validate, that input is filled and it's working with two of my 3 inputs, but there is one input where I'm unable to figure at what is false. Here's my HTML Code:

<form onsubmit="return !!(validateForms() & validatePosition() & validateName() & validateBranche())" class="form" name="form" action="assets/components/register.php" method="post" autocomplete="off">
                        <input type="text" name="name" placeholder="Name" id="name">
                                        <div id="name_error"></div>
                        <input type="text" name="position" placeholder="Position" id="position">
                                        <div id="position_error"></div>
                        <input type="text" name="branche" placeholder="Branche" id="branche">
                                        <div id="branche_error"></div>
                        <input type="number" name="random" placeholder="Number" id="random">
                        <input class="btn btn-outline-success my-2 my-sm-0" type="submit" name="" value="Submit">
                    </form>

and my JS Code:

function validateForms() {
  var position = document.getElementById("position");
  var name = document.getElementById("name");
  var branche = document.getElementById("branche");

  var name_error = document.getElementById('name_error');
  var position_error = document.getElementById('position_error');
  var branche_error = document.getElementById('branche_error');

}



function validateName() {
  alert(name.value);
  if (name.value == "") {
    name.style.borderBottom = "1px solid red";
    name_error.style.color = "red";
    name_error.textContent = "name is required";
    name.focus();
    return false;
  }
}

function validatePosition() {
  if (position.value == "") {
    position.style.borderBottom = "1px solid red";
    position_error.style.color = "red";
    position_error.textContent = "position is required";
    position.focus();
    return false;
  }
}
function validateBranche() {
  if (branche.value == "") {
    branche.style.borderBottom = "1px solid red";
    branche_error.style.color = "red";
    branche_error.textContent = "branche is required";
    branche.focus();
    return false;
  }
}

I actually have the same setup in all the functions, but when I do alert(name.value) I get as an output undefined.

Answer 1

validateForms() is pointless - it serves simply to put references to HTML objects into global scope, where those could much more simply put into their specific methods in local scope.

Finally, you need some return true if you want it to ever submit the form.

 function validateName() { var name = document.getElementById("name"); var name_error = document.getElementById('name_error'); if (name.value == "") { name.style.borderBottom = "1px solid red"; name_error.style.color = "red"; name_error.textContent = "name is required"; name.focus(); return false; } return true; } function validatePosition() { var position = document.getElementById("position"); var position_error = document.getElementById('position_error'); if (position.value == "") { position.style.borderBottom = "1px solid red"; position_error.style.color = "red"; position_error.textContent = "position is required"; position.focus(); return false; } return true; } function validateBranche() { var branche = document.getElementById("branche"); var branche_error = document.getElementById('branche_error'); if (branche.value == "") { branche.style.borderBottom = "1px solid red"; branche_error.style.color = "red"; branche_error.textContent = "branche is required"; branche.focus(); return false; } return true; } 

 <form onsubmit="return !!(validatePosition() & validateName() & validateBranche())" class="form" name="form" action="assets/components/register.php" method="post" autocomplete="off"> <input type="text" name="name" placeholder="Name" id="name"> <div id="name_error"></div> <input type="text" name="position" placeholder="Position" id="position"> <div id="position_error"></div> <input type="text" name="branche" placeholder="Branche" id="branche"> <div id="branche_error"></div> <input type="number" name="random" placeholder="Number" id="random"> <input class="btn btn-outline-success my-2 my-sm-0" type="submit" name="" value="Submit"> </form> 

Answer 2

Try this :

  var position;
  var name;
  var branche;

  var name_error;
  var position_error;
  var branche_error;
function validateForms() {
   position = document.getElementById("position");
   name = document.getElementById("name");
   branche = document.getElementById("branche");

   name_error = document.getElementById('name_error');
   position_error = document.getElementById('position_error');
   branche_error = document.getElementById('branche_error');

}



function validateName() {
  alert(name.value);
  if (name.value == "") {
    name.style.borderBottom = "1px solid red";
    name_error.style.color = "red";
    name_error.textContent = "name is required";
    name.focus();
    return false;
  }
}

function validatePosition() {
  if (position.value == "") {
    position.style.borderBottom = "1px solid red";
    position_error.style.color = "red";
    position_error.textContent = "position is required";
    position.focus();
    return false;
  }
}
function validateBranche() {
  if (branche.value == "") {
    branche.style.borderBottom = "1px solid red";
    branche_error.style.color = "red";
    branche_error.textContent = "branche is required";
    branche.focus();
    return false;
  }
}

and that's because the scope of var is limited on the function then you should declace the variable outside the function(Globally) you can read this