Question

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

现在，当我关联另一个脚本，即formValidation时，它不起作用，我想我做得很好。我开始这样做，因此它只有一个验证，但是没有用。

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

谢谢

这是密码笔：

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>

SCRIPT 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

您的脚本存在的问题是，永远不会调用validatear（）函数。请记住，如果您编写了一个函数，并且从未在代码中调用过它，它将永远不会被执行。您要做的是在表单的onsubmit事件中将调用添加到您的validatear（）函数。

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

如果未验证表单的验证，则您的validatear（）函数应该返回false。

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

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

表单验证不适用于Vanilla JS

2 个答案: