Javascript 提交后，表格保持在同一页上

即使我的页面显示了警告消息，并且返回的错误代码明显存在，我的页面仍会继续提交。我做错了什么

     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

函数validateForm（）{
var selected=“”；
var radios=document.getElementsByName（“特殊”）；
var len=document.getElementsByName（“特殊”）.length；
var i；
对于（i=0；i
     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

对
否

在提交处理程序中，使用

事件.preventDefault

而不是

返回false

     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

function validateForm (event) {
...
        if(selected == "") {
            alert("Must select option.");
            event.preventDefault();
        }

为了支持IE8，您必须做更多的工作

     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

event.preventDefault ? event.preventDefault() : event.returnValue = false;

---

或者，您可以将

onsubmit

属性更改为

returnvalidateform（）

。这将阻止默认操作并停止事件传播，而不仅仅是阻止默认操作。

您必须这样说

     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

onsubmit="return validateForm();"

而不是

     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

onsubmit="validateForm();"

---

这是因为您正在检查

循环的
中选中的
的值，因此第一次它的值是
”
，第二次它变成
否
 您没有在表单中的onsubmit（）方法之前写入return

     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>

onsubmit="return validateForm();"

如果不在onSubmit（）方法调用之前编写return，则javascript无法将页面返回到表单中。
谢谢！成功了！现在，看到代码，您能解释为什么即使勾选了“否”选项，警报（“必须选择选项”）也会显示吗？谢谢！有什么更好的方法来编写这段代码，然后才能正常工作呢。我没有看到任何改变的代码，虽然使其正常工作？我遗漏了什么吗？@turd.ferguson如果你看到的话，我在第一次
If
检查之后关闭
for
循环，但是在你的代码中，所有
If
条件都被检入
for
。哦！哈哈。我不知道为什么我没有看到。可以看出，我对JavaScript非常陌生。非常感谢你！非常感谢。我最终使用了返回validateForm（）。这是一个快速简单的解决办法！您知道为什么即使勾选了“否”选项，it仍会显示警报（“必须选择选项”）？您的循环逻辑是，如果未勾选第一项，it会在第一时间触发警报，而不是在循环所有内容后触发警报。
     function validateForm () {
        var selected = "";
        var radios = document.getElementsByName("special");
        var len = document.getElementsByName("special").length;
        var i;

        for (i = 0; i < len; i++) {
            if(radios[i].checked) {
                selected = radios[i].value;
                break;
            }
            if(selected == "") {
                alert("Must select option.");
                return false;
            }
            else {
                return true;
            }
        }
     }

    <form action="FormProcessor.html" method="post" onreset="blank();" onsubmit="validateForm();" name="myForm">
            <p>Would you like special offers sent to you e-mail?</p>
            <input type="radio" name="special" value="Yes"/>Yes
            <input type="radio" name="special" value="No"/>No<br/>
            <input type="submit"/>
            <input type="reset"/>
    </form>