我想用JavaScript驗證我的必填字段是否爲空

Question

希望這是基本的JavaScript，答案很簡單，因爲我是新手。我只是想確保所有必填字段在用戶可以繼續之前不是空白的。在我的<form>action=payment.php和提交按鈕包含onclick="insert();"當child_name留空時，它只進行到下一頁而不是提示。下面是代碼：

<script type="text/javascript"> 
    function insert() { 
     if (window.XMLHttpRequest) { 
      xmlhttp = new XLMHttpRequest(); 
     } else { 
      xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
     } 



     cn1 = 'child_name'+document.getElementById('child_name').value; 
     ag2 = 'age'+document.getElementById('age').value; 
     hm3 = 'hometown'+document.getElementById('hometown').value; 
     bg4 = 'boy_girl'+document.getElementById('boy_girl').value; 
     fn5 = 'first_name'+document.getElementById('first_name').value; 
     ln6 = 'last_name'+document.getElementById('last_name').value; 
     email = 'email'+document.getElementById('email').value; 
     ad8 = 'address1'+document.getElementById('address1').value; 
     ad9 = 'address2'+document.getElementById('address2').value; 
     ct10 = 'city'+document.getElementById('city').value; 
     st11 = 'state'+document.getElementById('state').value; 
     zp12 = 'zip'+document.getElementById('zip').value; 

     if (cn1.equals("")) { 


     xmlhttp.open('POST', 'payment.php', true); 
     xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
     xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 
     } else { 
     alert ("Please enter all required fields."); 
     } 
    } 
</script> 

Answer 1

有幾個問題在這裏：

cn1 = 'child_name'+document.getElementById('child_name').value; 

在這種情況下，你要分配CN1到字符串'child_name' +您的CHILD_NAME文本框的值...它永遠不會等於一個空字符串。

其次，您會希望insert()方法錯誤地返回false以停止按鈕的預期操作。

Answer 2

嘗試改變功能如下：（注意：你有更多的測試增加了if子句的元素的其餘部分）

function insert() { 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XLMHttpRequest(); 
    } else { 
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); 
    } 


    if (document.getElementById('child_name').value === '' || 
     document.getElementById('age').value === '' || 
     ...more tests... || 
     document.getElementById('zip').value === '') { 
     alert ("Please enter all required fields."); 
     return false; 
    } else { 
     cn1 = 'child_name'+document.getElementById('child_name').value; 
     ag2 = 'age'+document.getElementById('age').value; 
     hm3 = 'hometown'+document.getElementById('hometown').value; 
     bg4 = 'boy_girl'+document.getElementById('boy_girl').value; 
     fn5 = 'first_name'+document.getElementById('first_name').value; 
     ln6 = 'last_name'+document.getElementById('last_name').value; 
     email = 'email'+document.getElementById('email').value; 
     ad8 = 'address1'+document.getElementById('address1').value; 
     ad9 = 'address2'+document.getElementById('address2').value; 
     ct10 = 'city'+document.getElementById('city').value; 
     st11 = 'state'+document.getElementById('state').value; 
     zp12 = 'zip'+document.getElementById('zip').value; 

     xmlhttp.open('POST', 'payment.php', true); 
     xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
     xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 
    } 
} 

Answer 3

如果我是你，我願意付出的每一個這些元素是通用名稱或類別。

例如：

<input id="child_name" class="not_blank" type="text"> 
<input id="age" class="not_blank" type="text"> 
<input id="hometown" class="not_blank" type="text"> 

由於要捆綁所有這些要素作爲一組由類。

然後你的JavaScript將是一個容易得多：

var flagInvalid = false; 
var tempArray = document.getElementsByClassName("not_blank"); 
for (var i = 0; i < tempArray.length; i++) 
{ 
    if (tempArray[i].value == "" || tempArray[i].value === undefined || tempArray[i].value == null){ 
     flagInvalid = true; 
     break; 
    } 
} 

if (flagInvalid == false){ 
    xmlhttp.open('POST', 'payment.php', true); 
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
    xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 

} else { alert ("Please enter all required fields."); } 

順便說一句，我強烈建議不要使用「警報」。嘗試在文檔本身上創建一個消息傳遞系統。像：

<span id="log" class="hidden" style="color:red"><b>"Please enter all required fields." <b></span> 

你的CSS是這樣的：

.hidden { display: none; } 
.show { display: inline; } 

您的JavaScript將被更改爲：

if (flagInvalid == false){ 
    var log = document.getElementById("log"); 
    log.className = 'hidden'; 
    xmlhttp.open('POST', 'payment.php', true); 
    xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); 
    xmlhttp.send(cn1&ag2&hm3&bg4&fn5&ln6&email$ad8&ad9&ct10&st11&zp12); 

} else { 
    var log = document.getElementById("log"); 
    log.className = 'show'; 
}