我想用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'; 
}