PHP表单在Javascript验证之前提交

我有一个比较常见的问题，就是在提交表单之前要对表单进行验证。我在同一主题上尝试了几种变体，但没有掷骰子：充其量我无法提交任何内容，但通常我的表单只是忽略代码并提交

可能我错过了一些小东西，但我会感谢任何帮助！基本上只是想确保名字不是空的（返回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>

函数validateForm（）{
var x=document.forms[“savegameform”][“username”].value；
如果（x==null | | x==“”）{
document.getElementByID（“JSError”）.innerHTML=“错误：请输入名称。”；
返回false；
}否则{
返回true；
}
警报（“Bla”）；
}

名称：

//更多的形式
测试。

第一个解决方案-使用输入[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;
}

//JavaScript
函数validateForm（）{
var target=document.getElementById（“name”）；//例如
如果（target.value.length==0）{
警报（“需要名称”）；
返回false；
}
//好的，提交表格
返回true；
}

第二种解决方案-使用输入[类型=按钮]

<!-- 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();
        }
    };
};

//JavaScript
window.onload=函数（）{
var target=document.getElementById（“名称”）；
document.getElementById（“提交”）.onclick=function（）{
如果（target.value.length==0）{
警报（“需要名称”）；
}否则{
//好的，提交表格
表单提交（）；
}
};
};

您正在使它变得复杂

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:

名称：

//更多的形式
测试。

您的验证工作正常，但因为您正在尝试

document.getElementByID("JSError").innerHTML

而不是

document.getElementById("JSError").innerHTML

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

---

fiddle示例：

当单击

type='submit'

按钮时，表单已经提交，这将无法工作。这就是为什么我们要举办“onSubmit”活动。哦，天哪，我知道这会很愚蠢，但我太愚蠢了。我猜想，即使逻辑有缺陷，如果它总是返回false（我在一次测试中编辑了它），表单也不应该通过，所以我真的很困惑。嗯，今天之前我学习JS的时间不超过几个小时，所以我想这一定会发生的哈哈。谢谢你，希望我能投票！

document.getElementById("JSError").innerHTML