updated demo

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();"

updated demo

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

Answer 2

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

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（）方法之前写回文。

onsubmit="return validateForm();"

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

表格在提交后保留在同一页面上

3 个答案:

updated demo