Question

我在这里对我的问题进行了一些演示：http://jsfiddle.net/nt3Z3/

我正在使用Bootstrap v3.1和jQuery v1.11，在我的联系表单中，我有~5个输入和~1 textarea：

<fieldset>
<div class="form-group"> <!-- Only Posting one for size purposes -->
  <label for="nameBox" class="col-lg-2 control-label">Name</label>
  <div id="nameGroup" class="col-lg-10">
    <input type="text" id="nameBox" class="form-control" placeholder="John Smith" required="" />
  </div>
</div>
<div class="form-group">
  <label for="messageBox" class="col-lg-2 control-label">Message</label>
  <div id="messageGroup" class="col-lg-10">
    <textarea id="messageBox" class="form-control" placeholder="Your content here" required="" rows="3"></textarea>
  </div>
</div>
<button type="submit" id="submitButton" class="btn btn-primary center-block">Submit</button>
</fieldset>

在我的js文件中，我有以下几点：

$("#submitButton").click(function () {
  var name = $.trim($("#nameBox").val());

  if ($("input, textarea").val() == "") {
    $(this).parent().addClass("has-error");
  }
});

我已直接从谷歌的API导入了jquery的最新版本。

所以，回到问题所在。当我单击文本框中没有任何内容的提交按钮时，当只有div has-error（等等）应该具有时，字段集才会获得类nameGroup。我试图删除$.trim以查看问题是否存在并且没有成功。

当我按下提交按钮时，我的最终输出应该是什么，并且任何输入中都没有文字应该是

<fieldset>
  <div class="form-group">
  <label>Name</label>
  <div id="nameGroup" class="col-lg-10 has-error">
    <input type="text" />
  </div>
</fieldset>

但是根据我上面的当前js，我得到了这个

<fieldset class="has-error"> <!-- go away has-error -->
  <div class="form-group">
  <label>Name</label>
  <div id="nameGroup" class="col-lg-10 has-error">
    <input type="text" />
  </div>
</fieldset>

我做错了吗？俯瞰什么？是否有一种简单的方法可以让字段集在不说has-error或不为$("fieldset").removeClass("has-error");添加$("#nameGroup").addClass("has-error");的情况下获取{{1}}类？

Answer 1

此代码：

if ($("input, textarea").val() == "") {
  $(this).parent().addClass("has-error");
}

将课程放在#submitButton的父级上（因为它位于click上的#submitButton处理程序中）。它还只检查页面上第一个 input或textarea的值（而不是其他值）。

如果您想要它，例如，每个输入或文本框的父级，那么：

$("input, textarea").each(function() {
  if (!$.trim(this.value)) {
      $(this).parent().addClass("has-error");
  }
});

或者如果你喜欢

$("input, textarea").each(function() {
  var $this = $(this);
  if (!$.trim($this.val())) {
      $this.parent().addClass("has-error");
  }
});

Answer 2

按钮的父级是字段集。不是形式组。如果您想定位表单组，可以执行以下操作：

.parent().find('.form-group');

.parent（）不影响直接父级

2 个答案: