使用像twitter bootstrap这样的jquery突出显示错误的输入字段

Shi*_*dla 5 validation jquery input highlight

我有下面的示例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>
Run Code Online (Sandbox Code Playgroud)

因此,通过上面的代码,值"enter a value"在字段中更新,但字段不突出显示

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

小智 19

试试这个

$('.validate').css({ "border": '#FF0000 1px solid'});
Run Code Online (Sandbox Code Playgroud)

通过替换

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