Question

我有一些带有输入Adults和child的表格。当我选择的“成人”和“儿童”的最大值超出要求时，我就会显示错误消息。如果我将值更改为小于要求的值（Using onchange），错误消息不会消失。

我可以在提交值时进行检查。我的代码可用于提交功能，并且在更改成人和儿童的输入时出现问题。错误消息仍然存在。

onchange函数应该在Submit函数之内吗？

   noLink : function() {
            $('.nolink').on('click', function(e){
                e.preventDefault();
            });
        },

var $adultsInput = $('#bookingAdultCount'),
    $childrenInput = $('#bookingChildrenCount'),
    $bookingError = $('#booking-error'),
    $bookingForm = $('#bookingWidgetForm'),

  $bookingForm.submit(function(event) {
              // logic for submit 
        });

 // onchange event that does not work
  $adultsInput.on('change', function() {
       $adultsInput.parent().removeClass('booking-error');
       $childrenInput.parent().removeClass('booking-error');
  });

    <div class="filter__options-wrapper__filter-option">     
        <div class="input-container">
            <input id="bookingAdultCount" class="initGrow doNotClose" name="Adults" placeholder="Adults" min="1" max="10" readonly>
        </div>

  <ul class="filter__option__guests-list growMe filter__options-wrapper__single-choice-list open">
    <li><a class="nolink" href="#0" data-value="1" data-input-target="bookingAdultCount">1 Adult</a></li>
    <li><a class="nolink" href="#0" data-value="2" data-input-target="bookingAdultCount">2 Adults</a></li>
    <li><a class="nolink" href="#0" data-value="3" data-input-target="bookingAdultCount">3 Adults</a></li>
    <li><a class="nolink" href="#0" data-value="4" data-input-target="bookingAdultCount">4 Adults</a></li>
    <li><a class="nolink" href="#0" data-value="5" data-input-target="bookingAdultCount">5 Adults</a></li>

    </ul>
</div>

Answer 1

您遇到的问题是，当您在JavaScript中设置输入值时，不会触发change和input事件（我想您是通过{{1 }}。

以下是一些代码来演示：

<a class="nolink"....>

var test = document.getElementById('test');
var btn = document.getElementById('changeval');
//use input instead of change to demonstrate. Input is the same as change except for every character added to the text field.
test.addEventListener('input', (evt) => { console.log(evt.target.value); });

btn.addEventListener('click', (evt) => {
  test.value += "a";
});

您必须将<input type='text' id='test' value='' /> <button id='changeval'>Change Value</button>逻辑移动到处理这些链接的点击事件的任何位置。

仅供参考，我认为，发生这种情况的原因是，如果您要更改javascript中该字段的值，则在该字段的更改事件侦听器内，将导致无限循环。因此，如果更改源是JS，那么浏览器供应商就不会公开更改事件（因为您可以将所有相关逻辑移到要设置该值的地方）。

输入值onchange不会删除错误类别

1 个答案: