时间戳

首页 > 解决方案 > 无法在 JS 中验证表单

javascript - 无法在 JS 中验证表单

问题描述

我无法验证此页面中的表格，当我打开它时，它只是说它的年龄很糟糕，尽管我写了所有东西

它应该验证所有表单，而不仅仅是一个这是 JS

const form = document.getElementsByTagName('form')[0];
const email = document.getElementById('mail');
const emailError = document.querySelector('#mail + span.error');
email.addEventListener('input', function (event) {
    if (email.validity.valid) {
        emailError.innerHTML = ''; 
        emailError.className = 'error'; 
    } else {
        showError();
    }
});

form.addEventListener('Introducir', function (event) {
    if(!email.validity.valid) {   
        showError();
        event.preventDefault();
    }
});

function showError() {
    if (email.validity.valueMissing) {
        emailError.textContent = 'La dirección introducida no es válida.';
    } else if (email.validity.typeMismatch) {
        emailError.textContent = 'Debes introducir una dirección valida.';
    } else if (email.validity.tooShort) {
        emailError.textContent = `El email debe ser como mínimo ${ email.minLength } caracteres de largo; tu has introducido ${ email.value.length }.`;
    }
    
    emailError.className = 'error';
}

if (edad.value < 18) {
    alert("Debes tener 18 o más")
} else {
    formulario.submit()
}

这是我必须上传屏幕截图的 HTML，因为我无法添加更多代码 HTML

标签： javascriptforms

解决方案

我在您提供的代码中看到 2 个问题：

  1. 表单字段在页面加载时立即被设置为无效
  2. 您的edad表单字段在页面加载时立即得到验证

要解决问题 #1，您应该在提交表单和/或验证表单字段时将表单字段设置为无效，而不是在页面加载时。

查看这个答案，它解释了这个问题的解决方案。

要解决问题 #2，您应该将您的事件包装alert(...)在一个事件处理程序中，例如：

const edad = document.getElementById("edad");
edad.addEventListener('input', function(event) {
    if (this.value < 18) {
    alert("Debes tener 18 o más");
  } else {
    formulario.submit()
  }
});

另请注意，警报（特别是如果它出现在用户的输入中）并不是显示错误的最用户友好的方式。您应该在输入字段上使用错误消息，就像您为email字段所做的那样：

const edad = document.getElementById("edad");
const edadError = document.querySelector('#edad + span.error');
edad.addEventListener('input', function(event) {
    let value = parseInt(this.value);
  
    if (isNaN(value) || value < 18) {
    edadError.textContent = "Field is invalid.";
    edadError.className = "error";
  } else {
    edadError.textContent = "";
    edadError.classList.remove("error");
    formulario.submit()
  }
});

看到这个小提琴。

推荐阅读