JavaScript 页面上的验证错误，但可以转到下一步

Question

我有一个日期选择器，如果用户选择的日期超过 5 年，则应出现以下错误消息“您不符合我们的计划”，如果出现此错误消息，用户将无法进入下一步。

这是我的代码：

<div class="row" id="CitizenDate">
   <div class="col-md-6 ">
     <label class="control-label " style="color:black; font-size:13px;text-align:left;"> Citizen Since:<span style="color:red"> *</span></label>
     <input type="text" class="form-control datepicker_recurring" placeholder="-- Citizen Since --" id=CitizenSince name="CitizenSince" style="max-width:190px;margin-top:2px;" data-val-regex-pattern="^([0]?[0-9]|[12][0-9]|[3][01])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4}|[0-9]{2})$" data-val-regex="Invalid Date" data-val="true" required />
     <span class="field-validation-error" id="Citizen_Err"></span>
    <br />
  </div>
</div>

这是我的 JavaScript：

    $('#CitizenSince').datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true,
        yearRange: "1980:2030"
    });

    $("#CitizenSince").on('change', function () {
        var reg = new RegExp('^([0]?[0-9]|[12][0-9]|[3][01])[./-]([0]?[1-9]|[1][0-2])[./-]([0-9]{4}|[0-9]{2})$');
        var date = Date.parse($(this).val());
        var dtV = $(this).val();
        var exploded = dtV.split("/");
        var d = new Date(exploded[2], exploded[1] - 1, exploded[0]);
        $('#Citizen_Err').hide();
        if (!reg.test($(this).val())) {
            var errorid = $(this).attr('id') + 'Error';

            $('#Citizen_Err').text('Incorrect Date Format. Please use "dd/mm/yyyy" Format.');
            isvalid = false;
            $('#Citizen_Err').show();

        } else {
            var currentYear = new Date(new Date().setFullYear(new Date().getFullYear()))

            if (currentYear.getFullYear() - d.getFullYear() > 5) {
                var errorid = $(this).attr('id') + 'Error';
                $('#Citizen_Err').text('You are ineligible for the program');
                isvalid = false;
                $('#Citizen_Err').show();
            }

        }

    });

当我测试此代码时，确实出现了错误消息，但我仍然可以进行下一步。 如果我选择了错误的日期格式，例如：“mm/dd/yyyy”，则会出现错误的日期格式 msg，我无法进行下一步。 如果我选择大于 5 年的日期，如何防止用户进入下一步？

Answer 1

我想无效日期实际上是由 jquery datepicker 插件本身处理的，因此焦点仍然存在（我可能是错的）。

但是自定义逻辑不会以任何方式限制日期选择器，因为就日期选择器插件而言，日期仍然有效。

尝试将您的自定义验证移动到新的 function 并处理 datepicker 的模糊事件，如下所示。

$('#CitizenSince').on('blur',function(){
  var result = yourCustomValidation(this);
  if (!result) {
     $('#CitizenSince').focus();  // something link this
  }
});

可能有更好的解决方案，但在有人发布之前，请尝试这种方法。

谢谢。

Answer 2

问题是这一行：

if (currentYear.getFullYear() - d.getFullYear() > 5) 

它应该是

if (d.getFullYear() - currentYear.getFullYear() > 5)

在线演示