Question

我有一个包含多个步骤的表单和一个在步骤2中检查输入字段日期的函数。如果日期超过X个月，则用户无法转到步骤3，该功能会禁用下一个按钮。

但是这个函数适用于更改事件，如果用户退后一步（到第1步），之后到第2步，函数不会运行直到用户更改输入字段，如果用户没有＆＃39; t更改，用户可以使用错误的日期转到第3步。

function functionTest(){
  if (thereIsMissingValue())
        return

  let formDate = getFormDate()
    let comparisonDate = getComparisonDate()
    let formNewDate = getNewDate()

    let isOlderThanComparison = formDate < comparisonDate
    let isNewerThanToday = formDate > formNewDate

    if(isOlderThanComparison) {
      $('#next_button').prop('disabled', true);
      console.log('test');
    }else if(isNewerThanToday) {
      $('#next_button').prop('disabled', true);
      console.log('test2');
    }else {
      $('#next_button').prop('disabled', false);
      console.log('test3');
    }
}


$('#input1').change(function(){
    functionTest();
});

如何确保此功能在没有更改事件的情况下也能正常工作？

我现在仍然通过禁用上一个按钮来修复它。将上一个按钮添加到条件中。不是最好的选择，但它有效。

Answer 1

在你的函数中添加return然后在#next click

上调用此函数

function functionTest() {
        if (thereIsMissingValue())
            return;

        let formDate = getFormDate()
        let comparisonDate = getComparisonDate()
        let formNewDate = getNewDate()

        let isOlderThanComparison = formDate < comparisonDate
        let isNewerThanToday = formDate > formNewDate

        if (isOlderThanComparison) {
            $('#next_button').prop('disabled', true);
            return false;
            console.log('test');
        } else if (isNewerThanToday) {
            $('#next_button').prop('disabled', true);
            return false;
            console.log('test2');
        } else {
            $('#next_button').prop('disabled', false);
            console.log('test3');
            return true;
        }
    }

现在在#next上调用此函数点击日期是正确的，它将返回false并且不会转到第3页

 $('#next').click(function () {
        if (!functionTest())
            return
    });

如何在没有表单加载的情况下运行on更改功能

1 个答案: