Question

以下代码验证包含两个字段的表单。当我单击没有任何数据的提交按钮时，错误消息将显示哪个正常，但如果我输入数据后单击提交按钮，则错误消息不会消失。

<script>
function validateForm() {
    var valid = true;
    var x = document.forms["myForm"]["activityName"].value;
    if (x == "" || x == null) {
        document.getElementById("activityName").innerHTML = "Please Enter Activity Name";
        valid= false;
    }

    var r = document.forms["myForm"]["reporter"].value;
    if (r == "") {
        document.getElementById("reporter").innerHTML = "Please Enter Reporter";
    valid = false;
    }

    return valid;

}   
</script>
</head>
<body>
    <form action="#" method="post" name="myForm" onsubmit=" return validateForm()">
    <div>
       <label for="myActivityName">*Activity Name:</label>
       <input type="text"  name="activityName" value="" placeholder="Enter Activity Name"  />
       <p id="activityName"></p>
    </div><br>

    <div>
       <label for="reporter">*Reporter:</label>
       <input type="text"  name="reporter" value="" placeholder="Enter Reporter "  />
       <p id="reporter"></p>
    </div><br>      
    <input type="submit" value="Submit" >
    </form>
</body>

Answer 1

另一个答案是正确的，但这里有一些代码来支持它。请注意，innerHTML和activityName的{{1}}在验证发生之前得到（重新）设置为空：

reporter

Answer 2

您的问题是您永远不会“取消验证”表单a.k.a.删除以前的验证错误。在从验证返回之前，如果没有错误，只需还原验证检查。如果没有任何问题，这将确保它“清理”您的界面。

单击“提交”后，JavaScript验证错误消息未消失

2 个答案: