我想用JavaScript验证我的必填字段是否为空

希望这是基本的JavaScript，答案很简单，因为我是新手。我只是想确保在用户可以继续之前，所有必填字段都不是空的。在my 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>

---

这里有几个问题：

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

在本例中，您将cn1分配给字符串“child_name”+child_name文本框的值。。。它永远不会等于空字符串

---

其次，您希望insert方法在出错时返回false，以停止按钮的预期操作。

这里有几个问题：

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

在本例中，您将cn1分配给字符串“child_name”+child_name文本框的值。。。它永远不会等于空字符串

---

其次，您希望insert方法在出错时返回false，以便停止按钮的预期操作。

尝试将函数更改为：注意：您必须为其余元素的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); 
    }
}

---

尝试将函数更改为：注意：您必须为其余元素的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); 
    }
}

---

如果我是你，我会给这些元素中的每个元素一个通用名称或一个类

例如：

<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将更改为：

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';
}

---

如果我是你，我会给这些元素中的每个元素一个通用名称或一个类

例如：

<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将更改为：

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';
}

---

你是说JavaScript，不是Java，对吗？我理解的是，你想让我们更正你的代码，对吗？二进制&运算符不连接字符串。另外，您忘记了=s和对您的值进行编码。调用此函数的代码在哪里？这看起来像什么？你是说JavaScript，不是Java，对吗？我的理解是，你想让我们更正你的代码，对吗？二进制&运算符不连接字符串。另外，您忘记了=s和对您的值进行编码。调用此函数的代码在哪里？那是什么样子的？不行。即使字段为空，仍会进入下一页。不起作用。即使字段为空，仍会进入下一页。不起作用。即使必填字段保留为空，它仍将进入下一页。您必须诊断要传递到tempArray[i].value的值。如果它不等于，那么您可能必须查看它是否未定义或是否为null。我刚刚更新了上面的代码。不起作用。即使必填字段保留为空，它仍将进入下一页。您必须诊断要传递到tempArray[i].value的值。如果它不等于，那么您可能必须查看它是否未定义或是否为null。我刚刚更新了上面的代码。您希望insert方法在出现错误时返回false-不确定这是什么意思。正如Jim解释的，在onclick中返回false将告诉浏览器提交表单的默认行为，在您的情况下不应该发生。您希望insert方法在出现错误时返回false-不确定这是什么意思。正如Jim解释的，在onclick中返回false将告诉浏览器，在您的情况下，提交表单的默认行为不应该发生。