javascript - 即使填写了字段，此 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)旁边有一个 span，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

my submit button won't process the form action i have in place. Nothing happens.

因为你总是返回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 类。