Question

需要对textarea的验证产生自定义错误效果。尝试用小脚本来做，这会改变errorClass，也许我做错了什么或误解了。

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

错误应如下所示：http://i.imgur.com/3lnnX8S.png

现在它看起来是默认的：http://i.imgur.com/U71paPi.png

我有：JSFiddle

Answer 1

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

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

当您只想在用户输入时验证时，

:focus是必需的。

在此处查看您的更新示例：https://jsfiddle.net/2436ey01/

要添加自定义消息，您可以使用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!");
    }
};

这是一个例子：https://jsfiddle.net/z73gtr6s/

Answer 2

我认为这可能会对你有所帮助。由于我不知道您使用的是哪个库，仍然可以通过某种方式为您提供帮助。

JS / JQuery代码

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

Working:Fiddle

Answer 3

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

JS：

webshim.setOptions('forms', {
    lazyCustomMessages: true
});

//start polyfilling
webshim.polyfill('forms');

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

http://afarkas.github.io/webshim/demos/demos/forms.html#UI-replaceValidationUI

Answer 4

似乎有几个问题：

您的CSS中没有定义.error类 - 可能类似于#message.error并且拥有border: 1px solid red或者其他任何内容。
< / LI>
看起来控制台中出现错误，因为validates不是函数，这意味着您有错误的依赖项，因此请检查您需要哪些库。

Answer 5

.touch #message:focus {
box-shadow: none;
border-color: #383838; 
}

评论此

在textarea验证上更改边框颜色

5 个答案: