Question

我正在尝试验证输入是否已填充，并且可以使用我的3个输入中的2个，但是有一个输入我无法弄清楚什么是错误的。这是我的HTML代码：

<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>

和我的JS代码：

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;
  }
}

我实际上在所有功能上都具有相同的设置，但是当我执行alert(name.value)时，得到的输出是不确定的。

Answer 1

validateForms()是毫无意义的-它仅用于将对HTML对象的引用放入全局范围，而在本地范围内可以更简单地将其放入其特定方法。

最后，如果您希望return true提交表单，则需要一些。{p>

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

尝试一下：

  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;
  }
}

那是因为var的作用域受到函数的限制，因此您应该将变量放在函数外部（全局），您可以阅读this

修复.value =未定义的javascript

2 个答案: