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

【问题标题】：Changing color of textbox and adding text on Javascript validation更改文本框的颜色并在 Javascript 验证中添加文本
【发布时间】：2013-11-09 18:54:40
【问题描述】：

所以我正在尝试验证表单，但在验证失败时无法更改文本框。相反，表格会完成。我想要的是，如果验证失败，文本框边框变为红色，文本框下方的红色文本显示“填写我们的这个字段！”

这是我写的只是为了测试的目的，它不起作用，我不知道如何在相关框之后添加 red=colored 文本：

<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;

}

【问题讨论】：

您是否省略了函数周围的<script>...</script> 标签？
@Graham 否该函数位于外部 javascript 文件中，并在 HTML 头中调用
看起来您试图在不使用 document.getElementById 函数的情况下引用元素的 id。而不是引用“第一个”引用 document.getElementById("first")。
我在函数中使用 var first = document.getElementById("first") 之前使用它。它应该可以工作，但事实并非如此。

标签： javascript html validation dom

【解决方案1】：

我相信这就是你要找的，

http://jsfiddle.net/F8H7Y/

<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;

}

【讨论】：

为什么使用 var first=document.forms["reg"]["first"]; INSTEAD OF var first = document.getElementById("first") 并且它现在运行良好。我认为歌剧需要 ||出于某种原因工作的事情，我不知道。我对你的最后一个问题是，如何让文本出现在文本框下方，上面写着“填写这个文本框，这很重要！”？谢谢:)
document.getElementById 很好。两者都会产生相同的东西。至于错误消息，您可以添加另一个隐藏的 div 并使其在验证失败时可见。或者您可以使用相同的“第一个”并为其设置一个值。看@jsfiddle.net/F8H7Y/1
我试过了，非常棒。我设法创建了一个新的 div，将一个段落附加到该 div 并根据错误将特定的错误消息附加到该段落。所以我只是做了一个错误函数，但每当我继续点击按钮时它就会不断创建一个节点，这是一件坏事。它还破坏了我漂亮的 html 页面，我不知道如何设置它的样式。如果你能给我举个例子，我将不胜感激。感谢您的帮助:)
不要在每次点击时创建 Div。在 HTML 中预先创建一个 div 以及您的表单代码。并在验证失败逻辑中设置该 div 的 innerHTML 属性。
即使我新建一个div，当我一次又一次点击按钮时，它不会一直加到div上吗？例如：我在 div 中创建了一个“p”节点，上面写着“名字字段未填写”；然后我不填写字段并再次单击按钮，它不会在之前创建的节点下创建另一个完全相同的节点吗？

【解决方案2】：

Have a look on this post

我认为对于文本，您可以使用空 lable 使文本出现在文本框下方，在验证失败时显示“填充此文本框”。

【讨论】：

正在调查 :) 谢谢