JQuery循环每个输入以获取边框颜色？答案

【问题标题】：JQuery Loop each Input for border color?JQuery循环每个输入以获取边框颜色？
【发布时间】：2016-09-21 08:17:39
【问题描述】：

是否可以遍历每个输入并查看是否存在特定的边框颜色？

目前我正在使用触发 ajax 请求来验证表单输入的 keyup 事件。这很好用，如果发现错误，则输入应用了样式：

'border': '1pt solid #ff00ff', 'color': '#ff00ff'}

我还将错误消息添加到状态 DIV。我需要做的是清除状态，但是当所有错误都得到解决时。清除每个错误后，颜色将从边框中移除。

我已尝试计算错误并将计数存储在本地存储中，但如果用户不断在字段中输入有效值，则计数会减少，从而导致状态在不应该被清除时被清除。

所以我可以检查名称以name、id 或cell 开头的任何输入，如果有边框颜色为#ff00ff，则保留状态消息，否则从#status 中删除消息？

谢谢

【问题讨论】：

我宁愿建议检查class。创建error 具有必要边框样式的类，然后检查其可用性
我同意@Rajesh。在输入焦点上，从输入和相应的 div 中删除相关的错误类。每次都遍历dom真的效率低下

标签： jquery loops input

【解决方案1】：

正如已经指出的那样，这种事情通常不是通过设置边框和检查设置的边框来完成的。这样做是可能的，但它很麻烦且容易出错。

管理元素状态（“有效”/“无效”是元素状态）的一种更简单的方法是使用 CSS 类 - 特别是如果您想修改元素的视觉样式。

这就是我要做的。在样式表中添加一个 CSS 类“has-error”。

/* by default, the error status is not shown */
.error-status {
  display: none;
  border: 1px solid red;
}

/* in a form that has an error, the error status is visible */
form.has-error .error-status {
  display: block;
}

现在，经过验证，

从<form> 中删除has-error - 以防之前已设置。
找到您感兴趣的所有包含的<input> 元素。
将它们过滤到那些无效的（即空的）。对于剩下的人：
移回各自的<form>。
添加has-error 类。

这实际上适用于任意数量的表单和输入元素。如果没有无效的输入元素，最后两步什么都不做。

$("#btnVaidate").on("click", function() {
  $("form")
    .removeClass('has-error')
    .find("input[name^='name'], input[name^='cell'], input[name^='id']")
    .filter(function() { return !$.trim(this.value).length; })
    .closest('form')
    .addClass('has-error');
  });
});

【讨论】：

谢谢 - 我使用了这个的变体并在输入上设置类，然后检查该类的计数
您也可以这样做，或两者兼而有之。我发现在容器（即表单）上有一个 CSS 类也很方便，因为：编写适用于 "form.has-error" 中的任何元素的 CSS 很容易。编写适用于 “包含任何 element.has-error 的表单” 的 CSS 是不可能的。我的答案不包含任何显示或隐藏任何元素的代码。它所做的只是操纵“状态标记”。所有显示和隐藏都完全通过 CSS 完成。

【解决方案2】：

正如评论的那样，最好依赖类而不是 css-property。

逻辑：

将输入和错误标签包装在一个 div 中
验证输入，如果无效，将类添加到包装器div
使用 CSS 选择器切换样式。

以下是示例：

$("#btnSubmit").on("click", function() {
  var valid = validateForm();
  $('#lblError').toggleClass('hide', valid)
  if(valid){
    sendData();
  }
});

$('.content input').on('blur', validateForm)

function validateForm() {
  var formValid = true;
  var inputs = $(".content").find("input[name^='name'], input[name^='cell'], input[name^='id']");
  $.each(inputs, function(i, el) {
    var $el = $(el);
    var valid = $el.val().trim().length > 0;
    formValid = formValid && valid;
    $el.toggleClass('error', !valid);
  });
  
  return formValid;
}

function sendData() {
  console.log("Do your stuff here");
}

input.error {
  border: 1px solid red;  
}
p.error {
  color: red;
}
.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="content">
  <input type="text" name="cell1"/>
  <input type="text" name="id1"/>
  <input type="text" name="nameField"/>
  <input type="text" name="test"/>
</div>
<p id="lblError" class="hide error">This is not a valid value</p>
<button id="btnSubmit">Submit</button>

【讨论】：

您的 JS 代码中存在逻辑错误。你能看见它吗？ :)
不，我指的是您的“每个”会根据每个无效元素打开和关闭 has-error 类，而不是整体执行一次。这样容器是否有类，取决于循环中的最后一个元素是否有效。
假设您的组件包装器包含三个输入元素：有效、无效、有效。现在您的.each() 循环切换has-error 类：关闭、打开和关闭。总的来说，has-error 类在这种情况下将关闭。这是错误的。
感谢您，但这与我所拥有的页面的工作方式不同。我有一个状态 DIV 需要显示是否有错误。只有当没有错误显示时才被清除。我也更喜欢现场直播，而不是让用户点击提交按钮。

【解决方案3】：

应该这样做。您遍历所有输入并使用 jQuerys css() function 检查边框颜色

$("yourInputs").each(function(e){
  var borderColor = $(this).css("border-color");
  if(borderColor != "#ff00ff"){
     // empty the status div
     $("#statusDiv").empty();
  }else{
     // keep message
  }
});

要检查输入从哪个字符串开始，您应该检查此thread。

【讨论】：