Question

我创建的示例表单仅包含3＆lt; select＆gt;因为我正在使用用户的生日进行表单验证。如果甚至是3＆lt; select＆gt;中的一个。 items没有值，表单应该是preventDefault（）;否则它会返回true。 HTML ＆lt; form action =＆＃34;＆＃34;方法=＆＃34;后＆＃34;＆GT; ＆lt; select name =＆＃34; month＆＃34; ID =＆＃34;一个月＆＃34;＆GT; ＆lt; option value =＆＃34;＆＃34;＆gt; Month＆lt; / option＆gt; ＆lt; option value =＆＃34; January＆＃34;＆gt; January＆lt; / option＆gt; ＆lt; option value =＆＃34; February＆＃34;＆gt; February＆lt; / option＆gt; ＆lt; option value =＆＃34; March＆＃34;＆gt; March＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select name =＆＃34; day＆＃34; ID =＆＃34;天＆＃34;＆GT; ＆lt; option value =＆＃34;＆＃34;＆gt; Day＆lt; / option＆gt; ＆lt; option value =＆＃34; 1＆＃34;＆gt; 1＆lt; / option＆gt; ＆lt; option value =＆＃34; 2＆＃34;＆gt; 2＆lt; / option＆gt; ＆lt; option value =＆＃34; 3＆＃34;＆gt; 3＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; select name =＆＃34; year＆＃34; ID =＆＃34;一年＆＃34;＆GT; ＆lt; option value =＆＃34;＆＃34;＆gt; Year＆lt; / option＆gt; ＆lt; option value =＆＃34;＆＃34;＆gt; 2000＆lt; / option＆gt; ＆lt; option value =＆＃34;＆＃34;＆gt; 2001＆lt; / option＆gt; ＆lt; option value =＆＃34;＆＃34;＆gt; 2002＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt;输入类型=＆＃34;提交＆＃34;值=＆＃34;提交＆＃34;＆GT; ＆LT; /形式＆GT; 在我的javascript文件中，我有两个选项，但都无法成功执行。选项1 function validate（e）{ var selectItems = document.querySelectorAll（＆＃39; select＆＃39;）; selectItems.forEach（function（item）{ if（！item.value）{ e.preventDefault（）; } else { 返回true; } }） } document.querySelector（＆＃39; form＆＃39;）。addEventListener（＆＃39; submit＆＃39;，validate）; 选项2 function validate（e）{ var month = document.querySelector（＆＃39;＃month＆＃39;）; var day = document.querySelector（＆＃39; #day＆＃39;）; var year = document.querySelector（＆＃39;＃year＆＃39;）; if（！month.value＆amp;＆amp;！day.value＆amp;＆amp;！year.value）{ e.preventDefault（）; } else { 返回true; } } document.querySelector（＆＃39; form＆＃39;）。addEventListener（＆＃39; submit＆＃39;，validate）; 在选项1中，我遇到的问题是，虽然这三个项目已经完成，但表单仍然没有返回true。在选项2中，如果三个项目中的一个已经有值而另外两个没有值并且您提交了表单，则返回true。我应该如何做到这一点？

Answer 1

这应该有效：

＆＃13;

href="#Home"

＆＃13;

function validate(e) {
  var selectItems = Array.from(document.querySelectorAll('select'));

  if (selectItems.some(item => !item.value)) {
    e.preventDefault();
  } else {
    return true;
  }
}

document.querySelector('form').addEventListener('submit', validate);

＆＃13;

多个<select>元素验证使表单的提交变得复杂

1 个答案: