Question

我正在尝试在我的html表单上实现验证，以突出显示引导类has-error的表单输入，以防用户在我的rails应用程序中输入错误的信息。我使用ajax与自定义data对象，其中包含错误消息。到目前为止，我已经想出了这个：

的application.js

   jQuery.each(data.messages, function(i, val){
    $("label").val(i).closest("form-group").addClass("has-error");
  });

_account.html.erb

<div class="form-group">
 <%= account_form.label(:label, "Label") %>
 <%= account_form.text_field(:label, class: "form-control") %>
</div>
<div class="form-group">
 <%= account_form.label(:iban, "Iban") %>
 <%= account_form.text_field(:iban, class: "form-control", maxlength: 29, data: {toggle: "tooltip"}) %>
</div>
<div class="form-group">
 <%= account_form.label(:swift, "Swift") %>
 <%= account_form.number_field(:swift, class: "form-control", maxlength: 8, data: {toggle: "tooltip"}) %>
</div>

例如，i = "swift"和val = "is blank"，因此如果用户提供标签但忘记其他两个，则只有"swift"和"iban"将在i。

我的问题是，对于.each执行的每个循环，.closest会返回所有3个div，因此我无法根据.closest标签选择单个div

Answer 1

试试这个： -

 jQuery.each(data.messages, function(i, val){
  $("label:contains('"+i+"')").closest("form-group").addClass("has-error");
});

或者这将匹配所有文本： -

jQuery.each(data.messages, function(i, val){
  var lbl=$('label').filter(function () {
       return $(this).text().toLowerCase()==i.toLowerCase();
   }).first();
  lbl.closest(".form-group").addClass("has-error");
});

Answer 2

由于您要选择data.messages对象中存在文字的标签，我认为您可以尝试

$('.form-group label').filter(function () {
    return !!data.messages[$(this).text().trim()];
}).closest("form-group").addClass("has-error");

jQuery .closest（）返回多个结果

2 个答案: