Question

我有一个常见的问题，即在提交前让我的表单进行验证。我在同一个主题上尝试了几种不同的骰子：最多我无法提交任何内容，但通常我的表单会忽略代码并提交。

很可能我错过了一些小事，但我很感激任何帮助！基本上只是试图确保这里的名称不为空（返回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>

Answer 1

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

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

Answer 2

你正在复杂化。

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>

Answer 3

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

document.getElementByID("JSError").innerHTML

而不是

document.getElementById("JSError").innerHTML

JS抛出一个错误，永远不会到达你的＆＃34;返回false＆＃34;。当您使用浏览器控制台输出时，您可以轻松地看到这一点。（在firefox和chrome press F12中）。

示例小提琴：http://jsfiddle.net/6tFcw/

PHP表单在Javascript验证之前提交

3 个答案: