如何在提交之前单击输入提交时验证输入？

Question

我想要它，所以当他们点击提交按钮时，它将首先检查class =“req”的所有字段，如果有任何为空的，它将停止提交并给它们一个错误，否则提交应该通过。

我该怎么做？

Answer 1

这应做到：

document.getElementById('myForm').onsubmit = function() { 
    var elems = document.getElementsByClassName('req'); 
    for(var i = 0; i < elems.length; i++) { 
     if(elems[i].value.length == 0) { 
      return false; 
     } 
    } 
} 

这将附加功能，以您的表单提交事件。如果其中任何元素为空，该函数将立即返回false，从而阻止提交表单。

如果你不想被计空格只值填充，你可以用这个代替，如果条件在上面做：

if(elems[i].value.replace(/^\s+|\s+$/g,"").length == 0) { 
    ... 

Answer 2

添加一个“的onsubmit”事件处理表单会让你在需要时采取行动。

<form onsubmit="checkMyForm(this)"> 
    ... 
    </form> 

然后，你可以定义一个处理程序

<script> 
    function checkMyForm(myForm) { 
    for (var i = 0; i < myForm.elements.length; ++i) { 
     var input = myForm.elements[i]; 
     if (/\breq\b/.test(input.className) && !input.value) { 
     // Has an empty required input 
     alert('Please enter all required inputs'); 
     input.focus(); 
     return false; // abort form submission 
     } 
    } 
    } 
    </script>