即使已填写字段，此 javascript 表单验证也不会通过。有什么建议吗？

Question

<script type="text/javascript">
    function checkforinput() {

    if (document.getElementById('fname').value == "") {
        document.getElementById('fname').style.borderColor = "red";
        document.getElementById('errMsg').innerHTML = "*Please enter First and Last Name";
    } else {
        document.getElementById('fname').style.borderColor = "#c5c5c5";
        document.getElementById('errMsg').innerHTML = "";
    }

    if (document.getElementById('lname').value == "") {
        document.getElementById('lname').style.borderColor = "red";
        document.getElementById('errMsg2').innerHTML = "*Please enter First and Last Name";
    } else {
        document.getElementById('lname').style.borderColor = "#c5c5c5";
        document.getElementById('errMsg2').innerHTML = "";
    }

    if (document.getElementById('email').value == "") {
        document.getElementById('email').style.borderColor = "red";
        document.getElementById('errMsg3').innerHTML = "*Please enter a valid email";
    } else {
        document.getElementById('email').style.borderColor = "#c5c5c5";
        document.getElementById('errMsg3').innerHTML = "";
    }

    return false;
}
</script>

大家好。所以我的问题是关于这段 Javascript 代码。因此，这些输入（fname、lname 和 email）在它们旁边有一个跨度，其 id 为 errMsg，它将显示 .innerHTML 的任何值。验证有效。除非我完全填写所有字段，否则我的提交按钮将不会处理我现有的表单操作。没发生什么事。关于为什么会发生这种情况的任何想法。我觉得它必须与条件语句中的 ELSE 做一些事情，但我不知道它到底是什么。我在这里使用 ELSE 的原因是因为它将字段恢复到以前的样子。但也许它真的把我搞砸了。我需要帮助，伙计们。任何建议表示赞赏。 这是我的 HTML 代码：

<form name="postform" action="postingprocessed.php" method="post" onsubmit="return checkforinput()">
    <div class="fullName">
        <input id="fname" type="text" maxlength="100" placeholder="First Name" name="first_name" /><span id="errMsg"></span>
        <input id="lname" type="text" maxlength="100" placeholder="Last Name" name="last_name" /><span id="errMsg2"></span> 
    </div>
    <input id="email" class="text" type="email" maxlength="100" placeholder="Email" name="email" /><span id="errMsg3"></span>
    <br>
    <input id="submitBtn" class="submitBtn" type="submit" value="Post This!" name="SubmitBtn" />
</form>

Answer 1

我的提交按钮不会处理我的表单操作。没发生什么事。

因为你总是返回false，它告诉浏览器不要处理表单。仅当某些字段无效时返回 false，否则返回 true：

var valid = true;

if (document.getElementById('fname').value == "") {
    document.getElementById('fname').style.borderColor = "red";
    document.getElementById('errMsg').innerHTML = "*Please enter First and Last Name";
    valid = false;
} else {
    document.getElementById('fname').style.borderColor = "#c5c5c5";
    document.getElementById('errMsg').innerHTML = "";
}

// ...

return valid;

另一个建议。不要使用像现在这样的样式，这会使您的代码非常突兀、冗长且难以维护（想象一下，您想更改错误边框颜色 - 您需要在每个字段上更改它）。改用 CSS 类。

Answer 2

这只会在所有输入都有效的情况下提交表单:) 如果任何输入为空/无效，我们正在做的是设置 flag=1，最后如果 flag 为 1，否则不会提交表单会提交的。

<script type="text/javascript">
function checkforinput() {
var flag=0;
if (document.getElementById('fname').value == ""){
document.getElementById('fname').style.borderColor = "red";
document.getElementById('errMsg').innerHTML = "*Please enter First and Last Name";
flag=1;
}    
else {
document.getElementById('fname').style.borderColor = "#c5c5c5";
document.getElementById('errMsg').innerHTML = "";
}

if (document.getElementById('lname').value == ""){
document.getElementById('lname').style.borderColor = "red";
document.getElementById('errMsg2').innerHTML = "*Please enter First and Last Name";
flag=1;
}
else {
document.getElementById('lname').style.borderColor = "#c5c5c5";
document.getElementById('errMsg2').innerHTML = "";
}

if (document.getElementById('email').value == ""){
document.getElementById('email').style.borderColor = "red";
document.getElementById('errMsg3').innerHTML = "*Please enter a valid email";
flag=1;
}
else {
document.getElementById('email').style.borderColor = "#c5c5c5";
document.getElementById('errMsg3').innerHTML = "";
}
if(flag)
   return false;
else
   return true;
}
</script>