时间戳

首页 > 解决方案 > 输入值 onchange 不删除错误类

javascript - 输入值 onchange 不删除错误类

问题描述

我有一些输入Adults和child. 当我选择成人和儿童的最大值超过要求时，我有逻辑显示错误消息。如果我将值更改为小于要求的 ( Using onchange)，则错误消息不会消失。

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

应该在提交函数中使用onchange函数吗？

   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>

标签： javascriptjqueryonchangeform-submitjquery-events

解决方案

您遇到的问题是因为当您在 JavaScript 中设置输入的值时change并input没有触发事件（我假设您是通过<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>

您必须将change逻辑移动到处理这些链接的点击事件的任何位置。

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

推荐阅读