Question

我有以下代码检查两个选择字段是否相同。使用onsubmit调用时，代码可以正常工作。但是，在进行此验证后，表单仍然会提交。如何防止脚本或表单提交错误数据。

请参阅以下代码：

var fieldalias="Email address field"

function verify(element1, element2) {
    var passed=false
    if (element1.value=='') {
        alert("Please fill out the "+fieldalias+"!")
        element1.focus()
    }
    else if (element2.value=='') {
        alert("Please verify the "+fieldalias+"!")
        element2.focus()
    }
    else if (element1.value!=element2.value) {
        alert("The two "+fieldalias+"s do not match")
        element1.select()
    }
    else
        passed=true

    return passed

}

Answer 1

使用不同的事件调用该代码，例如ie：onchange或onfocusout。这样，每次用户在提交字段之前输入一些值时都会执行验证。

编辑：

我不确定我是否理解正确，但我会以这种方式附加你的JS代码：

首先将您的选择框分配给变量：

var object_input = document.getElementById("selectId");

然后：

if(object_input.addEventListener)
{
    object_input.addEventListener('blur', focus_lost);  
    object_input.addEventListener('keypress', checkForEnter);
}
else
{
    object_input.attachEvent('onblur', focus_lost);  
    object_input.attachEvent('onkeypress', checkForEnter);
}

然后执行你的验证ith focus_lost或checkForEnter。

Answer 2

您没有包含HTML，因此我假设您已将onsubmit（）添加到表单元素中。

如果是这样，请确保您的通话如下：

onsubmit="return verify(element1, element2)"

（相应地替换element1和element2）

如果这个假设不正确，请附上一些额外的细节，以便我们更好地协助。

Answer 3

假设在html代码中你有这样的东西：

<form action="test2.html" method="post" onsubmit="return verify(e1, e2);">
    <input type="text" name="e1" /><br/>
    <input type="text" name="e2" /><br/>
    <input type="submit" value="Validate" />
</form>

您必须输入onsubmit事件：

return verify(e1, e2);

因此，如果数据无效，您将不会转到提交页面

修改

我认为问题是

element1.select()

在第3个if中，这个select方法对于select对象不存在。

您可以使用

element1.focus()

可行的代码是：

var fieldalias="Email address field" function verify(element1, element2){ var passed=false; if (element1.value==''){ alert("Please fill out the "+fieldalias+"!"); element1.focus(); } else if (element2.value==''){ alert("Please verify the "+fieldalias+"!"); element2.focus(); } else if (element1.value!=element2.value){ alert("The two "+fieldalias+"s do not match"); element1.focus(); } else passed=true; return passed; }

和

<form action="test2.html" method="post" onsubmit="return verify(document.getElementById('e1'), document.getElementById('e2'));"> <select id="e1"> <option value="One">One</option> <option value="two">two</option> <option value="Three">Three</option> <option value="four">four</option> </select><br/> <select id="e2"> <option value="One">One</option> <option value="two">two</option> <option value="Three">Three</option> <option value="four">four</option> </select><br/> <input type="submit" value="Validate" /> </form>

Answer 4

尝试对事件调用stopImmediatePropagation（），以防止表单元素或更高级别元素中的任何其他处理程序对submit事件进行任何进一步处理。

验证表单而不提交

4 个答案: