PHP表单在Javascript验证之前提交

PHP Form Submits Before Javascript Validation

本文关键字：前提 提交 验证 Javascript 表单 PHP      更新时间：2023-09-26

我遇到了一个在提交之前验证表单的常见问题。我尝试了几个相同主题的变体，但都没有成功:我最多只能提交什么，但通常我的表单只是忽略代码并提交。

机会是我错过了一些小的，但我很感激任何帮助!本质上只是试图确保这里的名称不是空的(return true;是毫无意义的IIRC，但我已经绝望了，哈哈)。一旦我可以得到一些基本级别的验证下来，它只是归结为编码JS更复杂的操作，所以这应该是足够好的，我希望。谢谢!

<script>
function validateForm() {
    var x = document.forms["savegameform"]["username"].value;
    if (x == null || x == "") {
        document.getElementByID("JSError").innerHTML = "Error: Please enter a name."; 
        return false;
    } else {
    return true;
    }
    alert("Bla");
}
</script>
<form name="savegameform" method="post" action="submitsave.php" onSubmit="return validateForm(); return false;"><p>
<span class="formline">Name: </span><input type="text" name="username" size="25"><br />
//More of the form
<input type="submit" name="submit" value="Submit">
<span id="JSError">Test.</span>
    </p></form>

你把事情搞得太复杂了。

JavaScript: 

function validateForm() {
    var x = document.forms["savegameform"]["username"].value;
    if (x == null || x == "") {
        document.getElementByID("JSError").innerHTML = "Error: Please enter a name."; 
        return false;
    } else { return true; }
}
HTML: 

<form name="savegameform" method="post" action="submitsave.php" onSubmit="return validateForm()"><p>
<span class="formline">Name: </span><input type="text" name="username" size="25"><br />
//More of the form
<input type="submit" name="submit" value="Submit">
<span id="JSError">Test.</span>
    </p></form>

您的验证工作正常，但由于您试图

document.getElementByID("JSError").innerHTML
不是

document.getElementById("JSError").innerHTML

JS抛出一个错误，永远不会达到你的"return false"。当您使用浏览器控制台输出时，可以很容易地看到这一点。(在firefox和chrome中按F12)。

示例:http://jsfiddle.net/6tFcw/

第一个解决方案-使用input[type=submit]

<!-- HTML -->
<input type="submit" name="submit" value="Submit" onclick="return validateForm();" />
// JavaScript
function validateForm(){
    var target = document.getElementById("name"); // for instance
    if(target.value.length === 0){ 
        alert("Name is required");
        return false;
    }
    // all right; submit the form
    return true;
}

第二个解决方案-使用input[type=button]

<!-- html -->
<input type="button" name="submit" id="submit" value="Submit" />
// JavaScript
window.onload = function(){
    var target = document.getElementById("name");
    document.getElementById("submit").onclick = function(){    
        if(target.value.length === 0){ 
            alert("Name is required");
        }else{
            // all right; submit the form
            form.submit();
        }
    };
};
相关文章：