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");

您需要针对父元素(包装器)。

编辑

小提琴工作：https://jsfiddle.net/1otwoxsp/2/

Answer 2

我会将输入和图像标记放在div标记中，然后将"red“类添加到div中，这将覆盖两个标记，其效果将达到预期的效果。