表单验证不适用于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((函数。请记住，如果你写了一个函数，却从未在代码中调用过它，那么它就永远不会被执行。您要做的是在表单的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中调用事件。

Answer 2

您错过了对validar函数的调用

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

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