javascript验证空白输入框不起作用！

确定是在window.onload之后开始执行的?

第一个貌似没问题，能够执行。第二个你想怎么验证，既有name属性值为动态的单选按钮，又有name属性值为payment_methods的单选按钮，不能简单验证是否所有的单选按钮都没有被选中，而应该分为两组进行验证吧，根据不同的name属性值来进行分组。

<?php
if($_SERVER['REQUEST_METHOD'] === "POST"){
print_r($_POST);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<form name="forms1" action="b.php" method="post">
<input type="text" name="one"  /><br />
<input type="text" name="two"  /><br />
<input type="text" name="three"  /><br />
*复选框至少要选择一项<br />
<input type="checkbox" name="box1" value="1" />1<br />
<input type="checkbox" name="box2" value="2" />2<br />
<input type="button" name="submit" value="submit" onclick="checkSub()" />
</form>
<script>
function check_sub(){
var btns = document.getElementsByTagName("input");
for(var i=0; i < btns.length; i++){
if(btns[i].value == ""){
alert("输入内容不允许为空！");
btns[i].focus();
return false;
}
}
}function chkCheckBoxChs(objNam){ //檢測是否有選擇多选框的至少一项
var obj = document.getElementsByTagName(objNam); //獲取多選框數組
var objLen= obj.length; //獲取數據長度
var objYN; //是否有選擇
var i;
objYN=false;
//剔除类型不是checkbox的input元素,从第二个checkbox元素开始
for (i = 1;i < objLen;i++){
if (obj [i].checked==true) {
objYN= true;
break;
}
}
return objYN;
}function checkSub(){
if(check_sub() == false) return;
if(!chkCheckBoxChs("input")){
alert("请选择");
return;
}
document.forms1.submit();
}
</script>
</body>
</html>

第一个页面既然文本框有固定的id属性值，为什么不用呢，并且提交按钮的值也不会变，判断它的值的操作不是多余吗，修改一下：
function dosubmit() {
var v = document.getElementById('textbox_qty');
if (v.value.length < 1 || v.value == 0) {
v.style.borderColor = 'red';
alert('please fill all fields!');
return false;
}
else return true;
}

把结帐页面PHP生成的完整的form部分html代码发上来，帮你测试一下，不然比较难排查。

<form name='submit_form' method='post' action='order_confirmation.php' onsubmit='return isEmpty();'>
<tr>
<td style='border-bottom:3px #4F8A2B solid; color:#6B6B6B'>
<input type='radio' name='2' value='1' >11:30</td>
<input type='hidden' name='final_invoice_id' value='8731'>
<input type='hidden' name='order_time' value='2012-05-03 00:00:45'>
<input type='hidden' name='pickup_date' value='03/05/2012'>
<input type='hidden' name='display_total_price' value='24.40'></tr></table><p></p><p style='width:90%;color:#6B6B6B; margin:auto; font-family: Verdana, Arial, Helvetica, sans-serif;'><b>Payment Methods (Please select one of them)</b></p><table border='0' style='width:90%;color:#6B6B6B; margin:auto'>
<tr><td colspan=2 style='font-size:10.5pt'> You have<a style='color:#d34836'> $4.00 </a>credits left.<a style='color:#d34836' href='recharge.php'>Recharge Now!</a></td></tr><tr><td style='font-size:11.5pt'><input type='radio' name='payment_methods' value='credit' disabled='disabled'>Pay by Whim Win Credit - <a style='color:#d34836' href='recharge.php'>Recharge</a> will receive <a style='color:red'>5% discount off.</a></td></tr>
<tr><td style='font-size:11.5pt'>
<input type='radio' name='payment_methods' value='cr_and_card'>$4.00 Whim Win Cr+$20.4 by Credit / Debit Card / Paypal <a href='#' onclick='javascript:window.open('https://www.paypal.com/au/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');'><img  src='https://www.paypalobjects.com/en_AU/i/bnr/horizontal_solution_PP.gif' border='0' alt='Solution Graphics'></a></td></tr>
<tr><td style='font-size:11.5pt'>
<input type='radio' name='payment_methods' value='card'>Credit / Debit Card / Paypal <a href='#' onclick='javascript:window.open('https://www.paypal.com/au/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');'><img  src='https://www.paypalobjects.com/en_AU/i/bnr/horizontal_solution_PP.gif' border='0' alt='Solution Graphics'></a>
</td></tr>
</table><p></p><p style='width:90%;color:#6B6B6B; margin:auto; text-align:center'>
<input id='btn_continue' style='' name='continue_order' type='submit' value='Continue Shopping'>
<input id='btn_confirm' style='' name='go_next' type='submit' value='Confirm'><input name='hidden_credit' type='hidden' value='4.00'></p><p></p></form> </div> <div class="step_num"><b style="color:#d34836">FOLLOWING STEPS</b></div></br><div class="step_num"><b style="color:#d34836">STEP 4</b>: Pay, and remember your invoice ID, we are waiting for you at your pick up time!</div></br><div id="footer">
<p>
Offcial Email:<a href="mailto:[email protected]">[email protected]</a>
<br />
Please feel free to email us for any feedback or suggestions, Thank you!</a>
<br />
<h4>copyright &copy Whimwin Pty Ltd.</h4><br />
</div></div><script language="javascript">
</script>
太感谢了！

只看到一个name属性值为动态生成的单选按钮：
<input type='radio' name='2' value='1' >11:30</td>这是特例还是说固定只有一个？

不是固定这个可能会有两个源代码是
<input type='radio' name='$dest_id' value='$pick_up_time_id' >$pickup_time</td>

恩，那我换个思路，只遍历一次完成两组所有单选按钮的验证：
<script type="text/javascript">
function isEmpty() {
    var obj = document.getElementsByTagName('form')[0].getElementsByTagName('input');

var FLAG = {
pm: false,  //name = "payment_methods"
otherRadio: false
}

for (var i = 0; i < obj.length; i ++) {
if (obj[i].type == 'radio') {
if (obj[i].name == 'payment_methods') {
if (obj[i].checked == true) FLAG.pm = true;
}
else {
if (obj[i].checked == true) FLAG.otherRadio = true;
}
}
}

if (!FLAG.pm || !FLAG.otherRadio) {
alert('Please choose your pick up time and payment method.');
return false;
}
else return true;
}
</script>

奇怪了，我测试过可以的，你检查一下下面的html代码跟你的有什么不同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<form name='submit_form' method='post' action='order_confirmation.php' onsubmit='return isEmpty();'>
  <tr>
    <td style='border-bottom:3px #4F8A2B solid; color:#6B6B6B'><input type='radio' name='2' value='1' >
      11:30</td>
    <input type='hidden' name='final_invoice_id' value='8731'>
    <input type='hidden' name='order_time' value='2012-05-03 00:00:45'>
    <input type='hidden' name='pickup_date' value='03/05/2012'>
    <input type='hidden' name='display_total_price' value='24.40'>
  </tr>
  </table>
  <p></p>
  <p style='width:90%;color:#6B6B6B; margin:auto; font-family: Verdana, Arial, Helvetica, sans-serif;'><b>Payment Methods (Please select one of them)</b></p>
  <table border='0' style='width:90%;color:#6B6B6B; margin:auto'>
    <tr>
      <td colspan=2 style='font-size:10.5pt'> You have<a style='color:#d34836'> $4.00 </a>credits left.<a style='color:#d34836' href='recharge.php'>Recharge Now!</a></td>
    </tr>
    <tr>
      <td style='font-size:11.5pt'><input type='radio' name='payment_methods' value='credit' disabled='disabled'>
        Pay by Whim Win Credit - <a style='color:#d34836' href='recharge.php'>Recharge</a> will receive <a style='color:red'>5% discount off.</a></td>
    </tr>
    <tr>
      <td style='font-size:11.5pt'><input type='radio' name='payment_methods' value='cr_and_card'>
        $4.00 Whim Win Cr+$20.4 by Credit / Debit Card / Paypal <a href='#' onclick='javascript:window.open('https://www.paypal.com/au/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');'><img  src='https://www.paypalobjects.com/en_AU/i/bnr/horizontal_solution_PP.gif' border='0' alt='Solution Graphics'></a></td>
    </tr>
    <tr>
      <td style='font-size:11.5pt'><input type='radio' name='payment_methods' value='card'>
        Credit / Debit Card / Paypal <a href='#' onclick='javascript:window.open('https://www.paypal.com/au/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');'><img  src='https://www.paypalobjects.com/en_AU/i/bnr/horizontal_solution_PP.gif' border='0' alt='Solution Graphics'></a></td>
    </tr>
  </table>
  <p></p>
  <p style='width:90%;color:#6B6B6B; margin:auto; text-align:center'>
    <input id='btn_continue' style='' name='continue_order' type='submit' value='Continue Shopping'>
    <input id='btn_confirm' style='' name='go_next' type='submit' value='Confirm'>
    <input name='hidden_credit' type='hidden' value='4.00'>
  </p>
  <p></p>
</form>
</div>
<div class="step_num"><b style="color:#d34836">FOLLOWING STEPS</b></div>
</br>
<div class="step_num"><b style="color:#d34836">STEP 4</b>: Pay, and remember your invoice ID, we are waiting for you at your pick up time!</div>
</br>
<div id="footer">
  <p> Offcial Email:<a href="mailto:[email protected]">[email protected]</a> <br />
    Please feel free to email us for any feedback or suggestions, Thank you!</a> <br />
  <h4>copyright &copy Whimwin Pty Ltd.</h4>
  <br />
</div><script type="text/javascript">
function isEmpty() {
    var obj = document.getElementsByTagName('form')[0].getElementsByTagName('input');

var FLAG = {
pm: false,  //name = "payment_methods"
otherRadio: false
}

for (var i = 0; i < obj.length; i ++) {
if (obj[i].type == 'radio') {
if (obj[i].name == 'payment_methods') {
if (obj[i].checked == true) FLAG.pm = true;
}
else {
if (obj[i].checked == true) FLAG.otherRadio = true;
}
}
}

if (!FLAG.pm || !FLAG.otherRadio) {
alert('Please choose your pick up time and payment method.');
return false;
}
else return true;
}
</script>
</body>
</html>

愁死我了。
我已经把代码简化成这样了，还是不行。echo "<form name='submit_form' method='post' action='order_confirmation.php' onsubmit='return isEmpty();'>";echo "<input type='radio' name='1' value='2'>1234";

echo "<p style='width:90%;color:#6B6B6B; margin:auto; text-align:center'><input id='btn_continue' style='' name='continue_order' type='submit' value='Continue Shopping'><input id='btn_confirm' style='' name='go_next' type='submit' value='Confirm'><input name='hidden_credit' type='hidden' value='$credit'></p>";

echo "</form>"大佬，可不可能是别的原因？我这个页面里面有两个form，会不会冲突？

晕。。怎么又有两个form了，你给我的html代码中只有一个吧，所以我也是按照一个form来写的。。
函数体中第一行：
//获取的第一个form中所有的input元素（按照form在html代码中出现的顺序）
var obj = document.getElementsByTagName('form')[0].getElementsByTagName('input');//如果你要获取的是第二个form中的input元素，就改成下面这样
var obj = document.getElementsByTagName('form')[1].getElementsByTagName('input');

是这样的，是一个购物车  前面有一个form 是放物品的每一栏都可以更新数量和删除。
第二个form是选择时间和付款方式的，两个form转向页面不一样，如果能验证两个form都不能为空那就太好了！
但是我把代码又简化了还是不行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css_and_img/user_header.css" />
<link rel="stylesheet" type="text/css" href="css_and_img/user_main.css" />
<title>Your Cart</title>
</head>
<body><div id="top_div">
<div id="banner">
</div>
<div id="nav">
<div id="payment_logo">
</div> <?php include("include/user_header.htm");?>
</div>
</div>
<div id="main">
<div id="container">
<div id="quick_shop_entry">
<form name="submit_form" method="post" action="order_confirmation.php" onsubmit="return isEmpty();">

<input type="radio" name="1" value="2" />1234

<input id="btn_continue" name="continue_order" type="submit" value="Continue Shopping" />
<input id="btn_confirm" name="go_next" type="submit" value="Confirm" />

</form>

</div>
<?php include("include/footer.htm");?>
</div><script type="text/javascript">function isEmpty()
{
function isEmpty() {
    var obj = document.getElementsByTagName('form')[0].getElementsByTagName('input');

    var FLAG = {
        pm: false,  //name = "payment_methods"
        otherRadio: false
    }

    for (var i = 0; i < obj.length; i ++) {
        if (obj[i].type == 'radio') {
            if (obj[i].name == 'payment_methods') {
                if (obj[i].checked == true) FLAG.pm = true;
            }
            else {
                if (obj[i].checked == true) FLAG.otherRadio = true;
            }
        }
    }

    if (!FLAG.pm || !FLAG.otherRadio) {
        alert('Please choose your pick up time and payment method.');
        return false;
    }
    else return true;
}</script>
</body>
</html>我现在试试你改后的代码真是太感谢了

不能这么精简啊，至少要留一个name值为payment_methods的单选按钮，否则验证函数中FLAG.pm的值一直是false，那就没有验证效果了。

大佬你现身了
还是不行<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="css_and_img/user_header.css" />
<link rel="stylesheet" type="text/css" href="css_and_img/user_main.css" />
<title>Your Cart</title>
</head>
<?php
include_once 'lib/functions.php';
ini_set('display_errors', 'Off');
$db = new Connection();
$connection = $db->connect();
session_start();
?><body>
<div id="main">
<?php
if(!isset($_SESSION['user']))
{
header("Location:login.php");
}
else
{
echo "<table border='0' style='width:90%;color:#6B6B6B; margin:auto'>";
echo "<form name='submit_form' method='post' action='order_confirmation.php' onsubmit='return isEmpty();'>";

echo "<input type='radio' name='2' value='1130'>11:30";

echo "</table>";
echo "<table border='0' style='width:90%;color:#6B6B6B; margin:auto'>"; echo "<tr><td style='font-size:11.5pt'><input type='radio' name='payment_methods' value='credit' disabled='disabled'>Pay by Whim Win Credit - <a style='color:#d34836' href='recharge.php'>Recharge</a> will receive <a style='color:red'>5% discount off.</a></td></tr>";

echo "<tr><td style='font-size:11.5pt'><input type='radio' name='payment_methods' value='cr_and_card'>\$$credit Whim Win Cr+\$$difference by Credit / Debit Card / Paypal";
echo " <a href='#' onclick='javascript:window.open('https://www.paypal.com/au/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');'><img  src='https://www.paypalobjects.com/en_AU/i/bnr/horizontal_solution_PP.gif' border='0' alt='Solution Graphics'></a>";
echo "</td></tr>";
echo "<tr><td style='font-size:11.5pt'><input type='radio' name='payment_methods' value='card'>Credit / Debit Card / Paypal";
echo " <a href='#' onclick='javascript:window.open('https://www.paypal.com/au/cgi-bin/webscr?cmd=xpt/Marketing/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');'><img  src='https://www.paypalobjects.com/en_AU/i/bnr/horizontal_solution_PP.gif' border='0' alt='Solution Graphics'></a>";

echo "</td></tr>";

echo "</table>";

echo "<p></p>";
echo "<p style='width:90%;color:#6B6B6B; margin:auto; text-align:center'><input id='btn_continue' style='' name='continue_order' type='submit' value='Continue Shopping'><input id='btn_confirm' style='' name='go_next' type='submit' value='Confirm'><input name='hidden_credit' type='hidden' value='$credit'></p>";
echo "<p></p>";

echo "</form>";
}

?>
</div>

<div class="step_num"><b style="color:#d34836">FOLLOWING STEPS</b></div></br><script type="text/javascript">function isEmpty()
{
function isEmpty() {
    var obj = document.getElementsByTagName('form')[0].getElementsByTagName('input');

    var FLAG = {
        pm: false,  //name = "payment_methods"
        otherRadio: false
    }

    for (var i = 0; i < obj.length; i ++) {
        if (obj[i].type == 'radio') {
            if (obj[i].name == 'payment_methods') {
                if (obj[i].checked == true) FLAG.pm = true;
            }
            else {
                if (obj[i].checked == true) FLAG.otherRadio = true;
            }
        }
    }

    if (!FLAG.pm || !FLAG.otherRadio) {
        alert('Please choose your pick up time and payment method.');
        return false;
    }
    else return true;
}</script> </body>
</html>

调试易

javascript验证空白输入框不起作用！

解决方案 »

javascript验证空白输入框 不起作用！

解决方案 »

javascript验证空白输入框不起作用！