Javascript 更改textarea验证上的边框颜色

需要在验证

textarea

时产生自定义错误效果。 试着用小脚本来做，它改变了

errorClass

，也许我做错了什么或者被误解了

$('#message').validate({ errorClass:'error'});

错误应如下所示：

现在它看起来是默认的：

---

这是我得到的：

我想这可能会对你有所帮助。由于我不知道你使用的是什么库，我仍然可以用一些方法帮助你

JS/JQuery代码

$('.submit').click(function(){
    var content = $('textarea').text();
    if(content == "")
    {
        $('textarea').addClass('redBorder');
    }
    else
    {
        $('textarea').removeClass('redBorder');
    }
});

---

我想这可能会对你有所帮助。由于我不知道你使用的是什么库，我仍然可以用一些方法帮助你

JS/JQuery代码

$('.submit').click(function(){
    var content = $('textarea').text();
    if(content == "")
    {
        $('textarea').addClass('redBorder');
    }
    else
    {
        $('textarea').removeClass('redBorder');
    }
});

---

似乎有几个问题：

您的CSS中没有定义

.error

类，它可能类似于

#message.error

，并且具有

边框：1px纯红

或其他颜色

控制台中似乎出现错误，原因是

验证

不是函数，这意味着您有错误的依赖项，因此请检查您需要哪些库

---

似乎有几个问题：

您的CSS中没有定义

.error

类，它可能类似于

#message.error

，并且具有

边框：1px纯红

或其他颜色

控制台中似乎出现错误，原因是

验证

不是函数，这意味着您有错误的依赖项，因此请检查您需要哪些库

如果您想要一个好的（易于使用的）库来添加内联错误消息- 您可以使用，为您的示例工作（无css）

js:

我使用了内联验证，如下所示：

如果您想要一个好的（易于使用的）库来添加内联错误消息- 您可以使用，为您的示例工作（无css）

js:

我使用了内联验证，如下所示：

---

正如我从您的示例中看到的，您正在使用html5验证。要设置这些样式，请使用以下

伪选择器

：

input:focus:invalid, textarea:focus:invalid{
    border-color: red !important;
    -webkit-box-shadow: inset 0 1px 1px red;
    box-shadow: inset 0 1px 1px red;
}

：当您只想在用户键入时进行验证时，焦点

是必需的

在此处检查更新的示例：

要添加自定义消息，可以使用javascript自定义内置验证：

var message = document.querySelector('textarea#message');

message.oninvalid = function(e) {
    e.target.setCustomValidity("");
    if (!e.target.validity.valid) {
        e.target.setCustomValidity("You shall not pass!");
    }
};

---

这里有一个示例：

正如我从您的示例中看到的，您正在使用html5验证。要设置这些样式，请使用以下

伪选择器

：

input:focus:invalid, textarea:focus:invalid{
    border-color: red !important;
    -webkit-box-shadow: inset 0 1px 1px red;
    box-shadow: inset 0 1px 1px red;
}

：当您只想在用户键入时进行验证时，焦点

是必需的

在此处检查更新的示例：

要添加自定义消息，可以使用javascript自定义内置验证：

var message = document.querySelector('textarea#message');

message.oninvalid = function(e) {
    e.target.setCustomValidity("");
    if (!e.target.validity.valid) {
        e.target.setCustomValidity("You shall not pass!");
    }
};

这里有一个例子：

对此发表评论

---

请对此发表评论

您使用的验证库是什么？您使用的验证库是什么？Dat仅适用于

#name

和

#email

。不适用于textarea。抱歉修改了我的答案。我在selectorNow中添加了文本区域：focus:invalid！不错，很简单。我可以用同样的方法在“textarea”下发现错误文本吗？我在textarea下添加了一些自定义文本的代码。该代码仅适用于

\name

和

\email

。不适用于textarea。抱歉修改了我的答案。我在selectorNow中添加了文本区域：focus:invalid！不错，很简单。我能用同样的方法在“textarea”下发现错误文本吗？我添加了一些代码，用于自定义textarea下的文本Good option。但当我键入“名称”和“电子邮件”并按下“提交”时，仍然会有默认效果：当我将“textarea”设置为非活动状态时，它会消失。@QuackZilla啊，我使用了错误的JSFIDLE链接-我用正确的链接更新了答案：好选项。但当我键入“name”和“email”并按下submit时，仍然会有默认效果：当我将“textarea”设置为非活动状态时，它会消失。@QuackZilla啊，我使用了错误的JSFIDLE链接-我用正确的链接更新了答案：