如何在提交之前單擊輸入提交時驗證輸入？

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>