使用 twitter bootstrap 之类的 jquery 突出显示错误的输入字段答案

【问题标题】：Highlight the input field for error with jquery like twitter bootstrap使用 twitter bootstrap 之类的 jquery 突出显示错误的输入字段
【发布时间】：2013-12-14 12:56:47
【问题描述】：

我有以下示例 html 代码，我试图在其中突出显示输入字段，例如 twitter bootstrap 中的输入字段验证

<html>
<head>
$('#submit_form').submit(function(){
     var vals = $('.validate').val()
     if (!vals) 
        {
          console.log('Error exists');
          $('.validate').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
          $('.validate').val('enter a value');
        }   
});
</head>
<body>
    <form action="" method="post" id="submit_form">
      <div>
        <input class="validate" type="text" name="Name"/>
      </div>
      <input type="submit" value="Submit">
    </form>
</body>
</html>

所以通过上面的代码，值"enter a value"在字段中更新，但字段没有突出显示

此外，当我检查样式属性是否已添加到输入时.. 是的，它已成功添加，但为什么该字段没有突出显示

【问题讨论】：

border css 简写是<width> <style> <color>，而不是<color> <width> <style>；此外，更好地使用类而不是内联样式
它在jsfiddle中运行良好
是的，确实发现了问题，我有设计模板，所以在那个输入字段中定义了一些自定义类，所以尝试通过删除该 css 文件并使用纯 html 输入字段，然后它起作用了，需要检查编写的默认类如何避免这种希望所以.... :)

标签： jquery validation input highlight

【解决方案1】：

试试这个

$('.validate').css({ "border": '#FF0000 1px solid'});

通过替换

$('.validate').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");

【讨论】：