jQuery设置单个输入框边框颜色

Question

使用jquery可以设置特定输入字段的颜色吗？

如果某些验证失败，我想将其边框设置为红色，并在通过验证后将其恢复为黑色。

有什么方法可以实现这个功能吗？

- shaneburgess

---

好的。你目前有什么进展？ - user113716

Answer 1

在您的验证代码中，将出错的字段设置为错误。

$('#afieldID').addClass("error");  

在您的验证代码中，将没有错误的字段设置为相应的值。

$('#afieldID').removeClass("error");  

样式表代码

.error {
    border: solid 2px #FF0000;  
}

- Aaron Saunders

Answer 2

为什么人们总想自己编写代码，他们认为自己是程序员吗 ;^ ) 你应该考虑使用验证插件。我会做这样的事情：

  $('#item_id').addClass('errorClass');

那么您可以将所有内容放入类中，并根据需要进行交换。

- mcgrailm

---

谢谢，这很有帮助。我不想使用验证插件，因为我的验证方式相当奇特，编写自己的验证方式比尝试弄清楚如何让验证插件满足我的需求要容易得多。 - shaneburgess

我知道这是一个老问题，答案是“验证插件”。但是这个教程帮助我很多，可以设置单独的输入边框颜色（我没有用它来显示输入错误，只是为了让它看起来更好）。 - Cacho Santa

Answer 3

最好的方法是进行验证并为未通过验证的每个元素添加一个类。这将保持表单和内容之间的清晰分离。

假设以下表单：

<form id="myAwesomeForm">
    <input type="text" id="A" name="A"/>
    <input type="text" id="B" name="B"/>
    <input type="text" id="C" name="C"/>
</form>

你可以添加一个“on-submit”处理程序，以这种方式验证数据（假设你已经定义了一个函数isFieldValid，该函数确定有效性）：

;(function ($) {

  // When the document is ready... 
  $(document).ready(function () {
    // ... put a "submit" trigger on the form that checks data.
    $("#myAwesomeForm").submit(function () {

      // Make a list of the input fields we care about.
      var fieldList = ['A', 'B', 'C'];
      var areAllFieldsValid = true;

      // Loop through the inputs we care about
      for(var i = 0; i < fieldList.length; i++) {

        // Test for validity based on some function you defined somewhere.
        if (!isFieldValid("#A")) {
          // Mark this field as having invalid-data (and anything else
          // you want to do here).
          $("#A").addClass("invalid-data");
          // Make a note that we hit a false field so we can abort the submit.
          areAllFieldsValid = false;
        }
      }

      // Return true/false depending on whether we got invalid
      // data.  If this is false, the submit will be aborted.
      return areAllFieldsValid;
    });
  });

})(jQuery);

然后你只需要在你的文件中定义一个CSS类：

/* My CSS file */
.invalid-data { border: 1px solid red; }

- Sir Robert