验证表单而不提交

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

用不同的事件调用该代码，例如：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);
}

然后通过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()

在第三个条件中，对于选择对象不存在此选择方法。

您可以使用

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（），以防止表单元素或更高级别元素中的任何其他处理程序对提交事件进行任何进一步的处理。