如何使用javascript防止表單提交，因爲空字段？

Question

如何在javascript中創建腳本以輸出錯誤並阻止表單中的空字段提交表單？假設表單名稱是「form」，輸入名稱是「name」。我一直有一些麻煩與PHP並不總是正確處理空字段，所以我希望這作爲備份。任何幫助表示讚賞，謝謝。

Answer 1

克勞迪奧的答案很好。這裏有一個普通的js選項。只是說，如果字段爲空，則不做任何事 - 如果不是，則提交。

如果您需要驗證不止一個，只是在if語句添加&&操作，並添加相同的語法爲OtherFieldName

function checkForm(form1) 
{ 
    if (form1.elements['FieldName'].value == "") 
    { 
     alert("You didn't fill out FieldName - please do so before submitting"); 
     return false; 
    } 
    else 
    { 
     form1.submit(); 
     return false; 
    } 
} 

Answer 2

這是未經測試的代碼，但它證明了我的方法。

它將檢查「表單」中的任何文本字段是否爲空值，如果有，則取消提交操作。

當然，出於安全原因，您仍然需要檢查PHP中的空字段，但這應該可以減少使用空字段查詢服務器的開銷。

window.onload = function (event) { 
    var form = document.getElementsByName('form')[0]; 
    form.addEventListener('submit', function (event) { 
     var inputs = form.getElementsByTagName('input'), input, i; 
     for (i = 0; i < inputs.length; i += 1) { 
      input = inputs[i]; 
      if (input.type === 'text' && input.value.trim() === '') { 
       event.preventDefault(); 
       alert('You have empty fields remaining.'); 
       return false; 
      } 
     } 
    }, false); 
}; 

Answer 3

將事件處理程序附加到提交事件，檢查是否設置了值（DEMO）。

var form = document.getElementById('test'); 

if (!form.addEventListener) { 
    form.attachEvent("onsubmit", checkForm); //IE8 and below 
} 
else { 
    form.addEventListener("submit", checkForm, false); 
} 

function checkForm(e) { 
    if(form.elements['name'].value == "") { 
     e.preventDefault(); 
     alert("Invalid name!"); 
    } 
} 

Answer 4

HTML代碼： -

<form name='form'> 
<input type="button" onclick="runMyFunction()" value="Submit form"> 
</form> 

的JavaScript代碼： -

function runMyFunction() 
    { 
     if (document.getElementsByName("name")[0].value == "") 
     { 
      alert("Please enter value"); 
     } 
     else 
     { 
      var form= document.getElementsByName("form")[0]; 
      form.submit();   
     } 
    }