更改文本框的颜色并在Javascript验证中添加文本

因此，我尝试验证表单，但在验证失败时，无法获得文本框更改。相反，表单会被完成。我想要的是，如果验证失败，文本框边框将变为红色，文本框下方会显示一个红色文本，上面写着“填写我们的此字段！”

以下是我为测试而写的内容，它不起作用，我不确定如何在相关框后添加红色=彩色文本：

<form id="reg" method="POST" action="user.php" onsubmit="return validate()">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <button type="submit">Register</button>
</form> 


function validate(){
    var formIsValid = true;

    if(first.value === ""){
        //Not sure how to add Red-Colored Text below the box which says "Fill our this field!"
        first.borderColor = "red"; //NOT WORKING
        formIsValid = false;    
    }

    return formIsValid;

}

名字：
登记
函数验证（）{
var formIsValid=真；
如果（first.value==“”）{
//不知道如何在显示“填写我们的此字段”的框下方添加红色文本
first.borderColor=“red”//不工作
formIsValid=false；
}
返回formIsValid；
}

我相信这就是你要找的

名字：
登记
函数验证（）{
var formIsValid=真；
var first=document.forms[“reg”][“first”]；
if（first.value==null | | first.value==“”）{
first.style.borderColor=“红色”；
formIsValid=false；
}
返回formIsValid；
}

---

我认为对于文本，您可以使用空的标签使文本显示在文本框的正下方，上面写着“填充此文本框”验证失败。

是否省略了函数周围的

…

标记？@Graham否该函数位于外部javascript文件中，并在HTML标题中调用。看起来您试图引用元素的id而不使用document.getElementById函数。我没有引用“first”reference document.getElementById（“first”），而是在函数中使用var first=document.getElementById（“first”）。它应该可以工作，但不能。为什么要使用var first=document.forms[“reg”][“first”]；而不是var first=document.getElementById（“first”），它现在工作得很好。我认为歌剧需要这种东西来运作是有原因的，我不知道。我最后一个问题是，如何让文本显示在文本框的下方，上面写着“填写此文本框，这很重要！”？谢谢：）document.getElementById很好。两者将产生相同的结果。至于错误消息，您可以添加另一个隐藏div，并在验证失败时使其可见。或者您可以使用相同的“first”并在其上设置一个值。看，我试过了，真是太棒了。我设法创建了一个新的div，在div中添加了一个段落，并根据错误向段落中添加了特定的错误消息。所以我只是做了一个错误函数，但每当我点击按钮时，它就会不断创建一个节点，这是一件坏事。它也破坏了我漂亮的html页面，我不知道如何设计它。如果你能给我举个例子，我将不胜感激。谢谢您的帮助：）不要每次单击都创建div。在HTML和表单代码中预先创建一个div。只需在验证失败逻辑中设置该div的innerHTML属性。即使我创建了一个新div，当我一次又一次地单击按钮时，它不会一直添加到div中吗？例如：我在div中创建了一个“p”节点，表示“未填写名字字段”；然后我不再填写字段并再次单击按钮，它不会在之前创建的节点下创建另一个完全相同的节点吗？查看：）谢谢

<form name= "reg" id="reg" method="POST" action="user.php" onsubmit="return validate()">

    <label for="first">First Name: </label>
    <input id="first" name="first" type="text" value="">

    <input type="submit">Register</button>
</form> 



function validate(){
    var formIsValid = true;
    var first=document.forms["reg"]["first"];
    if(first.value == null || first.value == ""){
        first.style.borderColor = "red";
        formIsValid = false;    
    }

    return formIsValid;

}