Question

我正在尝试比较一对datetime值进行验证。我创建了一个动态表单，每次用户单击该表单时，都会单击“添加会话”按钮。会议表格div将被附加。例如，我尝试使用以下代码添加2个会话并验证2对会话datetime值。

    $('.startdatetime').each(function(){
        console.log($(this).val());
        console.log($(this).closest('.datetime-div').next().find('.enddatetime').val());
        if($(this).val() === "" || $(this).val() === null ){
            $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>");
            hasErr = true;
        }else if(moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')){ //validate start datetime < end datetime
            $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>");
            hasErr = true;
        }
    });

我正在使用console.log调试的第一个循环中的第一个会话结束日期时间获得不确定的值。

下面的代码显示了我的html代码段。

              <div class="row">
                <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
                    <div class="form-group">
                        <div class="form-line startdatetime-input">
                            <label>Start Date Time</label>
                            <input type="text" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time...">
                        </div>
                    </div>                    
                </div>
                <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
                    <div class="form-group">
                        <div class="form-line enddatetime-input">
                            <label>End Date Time</label>
                            <input type="text" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time...">
                        </div>
                    </div>                    
                </div>
            </div>

$('.startdatetime').each(function() {
  console.log($(this).val());
  console.log($(this).closest('.datetime-div').next().find('.enddatetime').val());
  if ($(this).val() === "" || $(this).val() === null) {
    $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>");
    hasErr = true;
  } else if (moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')) { //validate start datetime < end datetime
    $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>");
    hasErr = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
    <div class="form-group">
      <div class="form-line startdatetime-input">
        <label>Start Date Time</label>
        <input type="text" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time...">
      </div>
    </div>
  </div>
  <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
    <div class="form-group">
      <div class="form-line enddatetime-input">
        <label>End Date Time</label>
        <input type="text" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time...">
      </div>
    </div>
  </div>
</div>

有没有想到使用最合适的jQuery选择器获取最接近的enddatetime值？

Answer 1

代码中的所有内容看起来都很不错。您没有得到undefined，因为两个输入都为空，所以得到的是空值。如果填写属性value，您将在控制台中打印这些值，运行我共享并检查的代码段。我的更改在html input元素中。因此，似乎应该在用户填写完输入后运行共享的javascript，而不是像共享的代码段之前那样运行。

$('.startdatetime').each(function() {
  console.log($(this).val());
  console.log($(this).closest('.datetime-div').next().find('.enddatetime').val());
  if ($(this).val() === "" || $(this).val() === null) {
    $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Start Date Time is required.<p>");
    hasErr = true;
  } else if (moment($(this).val()).isSameOrAfter($(this).closest('.datetime-div').next().find('.enddatetime').val(), 'minute')) { //validate start datetime < end datetime
    $(this).closest('.startdatetime-input').after("<p class='error-message font-bold col-pink'>Invalid Date Time.<p>");
    hasErr = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
    <div class="form-group">
      <div class="form-line startdatetime-input">
        <label>Start Date Time</label>
        <input type="text" value="valueForStartDateTime" class="datetimepicker form-control startdatetime" placeholder="Please choose date & time...">
      </div>
    </div>
  </div>
  <div class="datetime-div col-md-6 col-xs-12 col-sm-12">
    <div class="form-group">
      <div class="form-line enddatetime-input">
        <label>End Date Time</label>
        <input type="text" value="valueForEndDateTime" class="datetimepicker form-control enddatetime" placeholder="Please choose date & time...">
      </div>
    </div>
  </div>
</div>

jQuery获取最接近的类的未定义值

1 个答案: