表单提交后留在同一页面上

Question

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

     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>

Answer 1

你必须这样说

onsubmit="return validateForm();"

代替

onsubmit="validateForm();"

更新的演示

那是因为您正在检查for循环中selected的值，所以第一次它的值是""第二次它变成No

Answer 2

在您的提交处理程序中，使用event.preventDefault而不是return false 。

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

您必须做更多的工作来支持IE8。

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

或者，您可以将onsubmit属性更改为return validateForm() 。 这将阻止默认操作并停止事件传播，而不仅仅是阻止默认操作。

Answer 3

您错过了在表单的onsubmit（）方法之前编写return的信息。

onsubmit="return validateForm();"

如果在onSubmit（）方法调用之前未编写return，则javascript无法将页面返回到表单中。