Question

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

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

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

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

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

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

由于

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

现在，经过验证，

从has-error移除<form> - 以防万一先前已设置。
查找您感兴趣的所有包含的<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');
  });
});

Answer 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>

Answer 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。

JQuery循环每个输入的边框颜色？

3 个答案:

逻辑：