表单验证不适用于 vanilla js

Question

我正在尝试仅使用 Vanilla JS 进行我的第一次表单验证。 我有一个表格，它有两个选择，您必须在其中选择您的部门，并根据它允许您选择另一个位置。 我为此编写了一个脚本。

现在，当我关联另一个名为 formValidation 的脚本时，它不起作用，我想我在表单验证方面做得很好。 我开始这样做，所以它只有一个验证，但它不起作用。

可能是什么问题呢？ 当我在脚本文件中编写表单验证时，它会覆盖函数或选择，因此它不起作用。 我不知道如何进行表单验证，因为我是 JS 新手，不允许使用 jquery 或任何东西。

谢谢

这是代码笔：

https://codepen.io/yomiram/pen/abNMaMy

HTML :

<section id="formSection">
    <span class="textForm">Formulario</span>
    <hr>

    <form action="/" id="form" action="GET">
        <div class="form-group">
            <input type="text" placeholder="Nombre" id="name" class="input-control" required/>
            <input type="text" placeholder="Apellido" id="lastName" class="input-control" />
          </div>
        
          <div class="form-group">
            <input type="email" placeholder="E-mail" id="email" class="input-control" required/>
          </div>
        
          <div class="form-group">
            <select class="input-control" style="flex: 6" id="dpto" required>
                <option selected="selected" class="department">Departamento</option>
            </select>
            <select class="input-control" placeholder="Localidad" id="location" style="flex:6" required>
                <option selected="selected" class="department">Localidad</option>
            </select> 
          </div>

          <div class="form-group">
            <input type="number" id="ci" class="input-control" placeholder="C.I" style="flex:6" required/>
          </div>

          <div class="form-group">
            <input type="checkbox" name="conditions" id="conditions" required>
            <label for="conditions" id="conditions"> Acepto las bases y condiciones</label><br>
          </div>
          <div class="form-group">
            <input type="submit" id="formButton" class="formButton" value="Enviar">
        
          </div>
    </form>
</section>

脚本JS（选择功能）：

// 在 SELECT 中显示数据

var dptosLocs = {
    "Artigas":["Artigas"," Bella Unión"],
    "Canelones":["Canelones"," Santa Lucía"],
    "Montevideo":["Montevideo"],
    "Salto":["Salto"," Daymán"," Arapey"]
};

var sel = document.getElementById('dpto');
var fragment = document.createDocumentFragment();

Object.keys(dptosLocs).forEach(function(dptosLoc, index) {
    var opt = document.createElement('option');
    opt.innerHTML = dptosLoc;
    opt.value = dptosLoc;
    fragment.appendChild(opt);
});

sel.appendChild(fragment);

document.getElementById("dpto").onchange = function() {defineDpto()};

function defineDpto() {
  var dpto = document.getElementById("dpto").value;

  if (dpto == "Artigas" ) {
    var sel = document.getElementById('location');
    var fragment = document.createDocumentFragment();

  Object.values(dptosLocs["Artigas"]).forEach(function(dptosLoc, index) {
    var opt = document.createElement('option');
    opt.innerHTML = dptosLoc;
    opt.value = dptosLoc;
    fragment.appendChild(opt)

    sel.appendChild(fragment);
}); 

  } else if (dpto == "Canelones") {
      document.getElementById('location').options.length = 0;

      var sel = document.getElementById('location');
      var fragment = document.createDocumentFragment();
    
      Object.values(dptosLocs["Canelones"]).forEach(function(dptosLoc, index) {
      var opt = document.createElement('option');
      opt.innerHTML = dptosLoc;
      opt.value = dptosLoc;
      fragment.appendChild(opt)

      sel.appendChild(fragment);
  });

  } else if (dpto == "Montevideo") {
      document.getElementById('location').options.length = 0;

      var sel = document.getElementById('location');
      var fragment = document.createDocumentFragment();
    
      Object.values(dptosLocs["Montevideo"]).forEach(function(dptosLoc, index) {
      var opt = document.createElement('option');
      opt.innerHTML = dptosLoc;
      opt.value = dptosLoc;
      fragment.appendChild(opt)

      sel.appendChild(fragment);
  });
  } else if (dpto == "Salto") {
      document.getElementById('location').options.length = 0;

      var sel = document.getElementById('location');
      var fragment = document.createDocumentFragment();
    
      Object.values(dptosLocs["Salto"]).forEach(function(dptosLoc, index) {
      var opt = document.createElement('option');
      opt.innerHTML = dptosLoc;
      opt.value = dptosLoc;
      fragment.appendChild(opt)

      sel.appendChild(fragment);
  });
  }
}

表格验证：

function validar (){
  var name, lastName, email, dpto, location, ci, condictions, expresion;

  name = document.getElementById('name').value;
  lastName = document.getElementById('lastName').value;
  email = document.getElementById('email').value;
  dpto = document.getElementById('dpto').value;
  location = document.getElementById('location').value;
  ci = document.getElementById('ci').value;
  conditions = document.getElementById('conditions').value;

  if (name === ""){
    alert("El campo nombre está vacío");
  }
}

Answer 1

您错过了对validar函数的调用

<form .... onsubmit="return validar()">

如果验证失败， validar应该返回 false，如果通过则返回 true

Answer 2

您的脚本的问题在于从未调用过 validar() 函数。 请记住，如果你编写了一个函数并且你从来没有在你的代码中调用过它，它就永远不会被执行。 您需要做的是在表单的 onsubmit 事件中添加对您的 validar() 函数的调用。

<form action="/" id="form" action="GET" onsubmit="return validar();">

如果未验证表单的验证，则您的 validar() 函数应返回 false。

if (name === ""){
    alert("El campo nombre está vacío");
    return false;
}
return true;

您应该看看在处理表单时如何在 javascript 中调用事件。