验证表单而不提交

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事件进行任何进一步处理。