即使数据无效，我的表单也会提交数据。但我的验证工作正常答案

【问题标题】：My form submits data even if it is invalid. But my validation works fine即使数据无效，我的表单也会提交数据。但我的验证工作正常
【发布时间】：2013-06-16 06:33:15
【问题描述】：

我的代码如下：。

<!doctype html>
<html lang="en">
<head>
<title>Testing the textarea</title>
<style type="text/css"></style>
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<div id="wrapper">
<span id="error_box" style="display:none;"></span>
<form name="storyTeller" method="get" action="#" onSubmit="return validateForm()">
<p class="title">
<label for="title">TITLE:</label>
<input type="text" id="title" name="title" required onBlur="validateTitle(title)"/>
</p>
<textarea name="entry" id="entry" rows="10" cols="45" onBlur="validateEntry(entry)">
</textarea>
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>

validation.js 的内容：

function validateTitle(title){/*validating the title*/
if (isNaN(document.getElementById('title').value)){
document.getElementById('title').style.background="#ccffcc";
document.getElementById('error_box').style.display="none";
return true;
}
else{
document.getElementById('error_box').innerHTML='Please enter a valid title';
document.getElementById('error_box').style.display="block";
document.getElementById('title').style.background="red";
return false;
}
}
function validateEntry(entry){/*validating the entry*/
var x=document.getElementById('entry').value;
x = x.trim();
if((x=="")||(x==null)){
document.getElementById('entry').style.background="red";
document.getElementById('error_box').innerHTML = 'Where is your story';
document.getElementById('error_box').style.display="block";
return false;
}
else{
document.getElementById('entry').style.background="#ccffcc";
document.getElementById('error_box').innerHTML='';
document.getELementById('error_box').style.display="none";
return true;
}
}
function validateForm(){/*validating the form*/
var error = 0;
if(!validateTitle('title')){
document.getElementById('error_box').style.display="block";
error++;
}
if(!validateEntry('entry')){
document.getElementById('error_box').style.display="block";
error++;
}
if(error > 0){
return false;
}
}

【问题讨论】：

“表单提交无效数据，但验证工作正常”似乎有矛盾。
是的，问题！你能帮帮我吗？
我的意思是如果表单提交了无效数据，那么这意味着验证不工作正常......但没关系。
你介意整理一下吗？？
将外部 JS 文件中的代码放入 html 注释中并不是很有帮助。我已经根据您真正拥有的最佳猜测编辑了您的问题。结果似乎在这里起作用：jsfiddle.net/qwnJC 你为什么在标题上使用isNaN()？

标签： javascript html css forms validation

【解决方案1】：

将提交按钮设为普通按钮；当点击调用最终验证函数时，在函数结束时，如果一切正常，必须手动提交表单

示例：

<script>
function val(){
    if(document.getElementById('tb').value != "")
    document.getElementById('frm').submit();
    else alert('fill the text field');
}
</script>
<form id="frm" action="#">
    <input type="text" id="tb"/>
    <input type="button" id="btn" value="submit" onclick="val()"/>
</form>

【讨论】：

什么？为什么不像 OP 那样在表单元素上使用 onsubmit= 事件？它有效：jsfiddle.net/qwnJC
因为 onsubmit 在您提交时发生，并且您想在提交之前验证您的字段。然后您可以决定是提交还是显示警告。你有控制权。我希望它有所帮助。
@Narwen 您使用的 getELementById 在条目验证中是错误的，它应该是 getElementById 没有大写 L。这可能是原因之一
您可以在onsubmit 处理程序中取消提交。无需更改为使用（非提交）按钮。显然OP还有其他问题，但与onsubmit的使用无关。
@nnnnnn 除了 getELementById 中的拼写错误，我看不到其他问题

【解决方案2】：

函数 validateEntry() 中的脚本有错误

换行：

document.getELementById('error_box').style.display="none";

到行：

document.getElementById('error_box').style.display="none";

【讨论】：

非常感谢！！我真的很糟糕！只是为自己感到羞耻。

【解决方案3】：

修改了您的代码，现在它更适用于提交和模糊事件。
在您的 HTML 源代码中，将两个 onblur 属性更改为 onblur="validateEntry(this)"，然后您就可以使用这个 javascript：

function validateEntry(entry) { /*validating*/
    var error_box = document.getElementById('error_box');
    error_box.style.display = "none";
    if (entry.name == "title") { // INPUT type="text"
        if (!isNaN(entry.value)) {
            error_box.innerHTML = 'Please enter a valid title';
            error_box.style.display = "block";
            entry.style.background = "#fee";
            return false;
        } else {
            entry.style.background = "#ccffcc";
            return true;
        }
    } else if (entry.name == "entry") { // TEXTAREA
        var x = entry.value.trim();
        if ((x == "") || (x == null)) {
            error_box.innerHTML = 'Where is your story?';
            error_box.style.display = "block";
            entry.style.background = "#fee";
            return false;
        } else {
            entry.style.background = "#ccffcc";
            return true;
        }
    }
}

function validateForm() { /*validating the form*/
    var form = document.forms['storyTeller'];
    var error_box = document.getElementById('error_box');
    var error = 0;
    var error_msg = '';
    if (!validateEntry(form['title'])) {
        error++;
        error_msg += error_box.innerHTML + '<br/>';
    }
    if (!validateEntry(form['entry'])) {
        error++;
        error_msg += error_box.innerHTML;
    }
    if (error > 0) {
        error_box.innerHTML = error_msg;
        error_box.style.display = "block";
        return false;
    } else {
        error_box.style.display = "none";
        return true;
    }
}

jsfiddle

【讨论】：