javascript - addClass 到 wrapAll 结果

Question

我有这个 date-picker 框，我使用 wrapAll 添加了一个日历图像，下图是结果:

这是我的代码:

$(function() {
  $(".date-picker").datepicker({
    dateFormat: 'dd/mm/yy'
  });

  $(".date-picker").each(function() {
    $(this).add($(this).next()).wrapAll('<div class="imageInputWrapper"></div>');
  });
});

.imageInputWrapper {
  width: 172px;
  border: solid 1px white;
  background-color: white;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 2px 0 #C2C2C2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form:input class="date-picker" type="text" path="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />

<img src="/resources/img/calendar.png" id="fromDateImgId"></td>

现在，我想检查用户是否没有插入任何日期或插入的日期无效，使用 addClass 为上面的整个图片添加一个红色边框，代码如下:

$(document).ready(function() {
  $("#submitCreateCampaignForm").submit(function(e) {

    var $form = $(this);
    var errors = 0;
    var fromDate = $form.find("input[name=fromDate]").val()

    if (fromDate == "") {
      $form.find("input[name=fromDate]").addClass("red");
      errors++;
    }

    if (errors) e.preventDefault();
  });
});

.imageInputWrapper {
  width: 172px;
  border: solid 1px white;
  background-color: white;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 2px 0 #C2C2C2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form:input class="date-picker" type="text" path="fromDate" style="width: 130px; height: 41px; background-color: white; border: none; outline: none; margin-left:5px" />

<img src="/resources/img/calendar.png" id="fromDateImgId"></td>

但我得到的结果是这样的:

如何将红色边框添加到 wrapAll 的整个结果中？

这是 jsFiddle 中的代码，不幸的是我无法将我的 form:input 功能添加到 Next 按钮:

jsFiddle

Answer 1

只需使用这个:

$form.find("input[name=fromDate]").parent().addClass("red");

您需要定位父元素(您的包装器)

编辑

fiddle 工作:https://jsfiddle.net/1otwoxsp/2/