JQUERY Datepicker - 从 datepicker 选择日期后验证错误不会消失

Question

我正在使用 jquery datepicker，它似乎存在一些验证错误的问题。验证错误后，如果我从 datepicker 中选择一个日期，则验证消息不会消失。如果我第二次选择日期，它就会消失。

这里是重现这个的步骤；

1- 输入错误的日期格式。 2- 将显示无效的日期格式错误。 3- 现在从日期选择器中选择一个日期。 4- 步骤二中显示的错误信息仍然存在。

我对此进行了一些研究，并尝试了此链接上给出的解决方案，但没有运气。

jQuery datepicker validation message issue

这是我的代码；

$("#date").datepicker({
  dateFormat: 'dd/mm/yy'
});

$('form').validate({
  rules: {
    date: {
      required: true,
      dateISO: true
    }
  },
  messages: {
    date: {
      required: "Date required",
      dateISO: "Invalid date. Must be formatted dd/mm/yy"
    }
  }
});


$.validator.addMethod('date',
  function(value, element) {

    if (this.optional(element)) {
      return true;
    }

    var ok = true;
    try {
      $.datepicker.parseDate('dd/mm/yy', value);
    } catch (err) {
      ok = false;
    }
    return ok;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<form>
  <input id="date" name="date" />
</form>

Answer 1

观察

• 第一次显示错误消息的原因是输入 date 初始化为空。

看这段代码sn-p，输入是用dateISO初始化的（后面会讲）。

$("#date").datepicker({
  dateFormat: 'dd/mm/yy'
});

$('form').validate({
  rules: {
    date: {
      required: true,
      dateISO: true
    }
  },
  messages: {
    date: {
      required: "Date required",
      dateISO: "Invalid date. Must be formatted dd/mm/yy"
    }
  }
});


$.validator.addMethod('date',
  function(value, element) {

    if (this.optional(element)) {
      return true;
    }

    var ok = true;
    try {
      $.datepicker.parseDate('dd/mm/yy', value);
    } catch (err) {
      ok = false;
    }
    console.log(ok)
    return ok;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<form>
  <input id="date" name="date" value='2018-01-02' />
</form>

看，现在输入 date 已初始化。

很好，但为什么仍然出现消息错误？原因是标志dateISO: true。验证器需要这种格式：yy-mm-dd。

看看这段代码 sn-p 没有那个标志：

$("#date").datepicker({
  dateFormat: 'dd/mm/yy'
});

$('form').validate({
  rules: {
    date: {
      required: true
    }
  },
  messages: {
    date: {
      required: "Date required",
      dateISO: "Invalid date. Must be formatted dd/mm/yy"
    }
  }
});


$.validator.addMethod('date',
  function(value, element) {

    if (this.optional(element)) {
      return true;
    }

    var ok = true;
    try {
      $.datepicker.parseDate('dd/mm/yy', value);
    } catch (err) {
      ok = false;
    }
    console.log(ok)
    return ok;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<form>
  <input id="date" name="date" value='2018-01-02' />
</form>

看，现在错误消息没有出现。

您需要确定要使用的格式。例如，如果我们将格式更改为 dateFormat: 'yy-mm-dd' 并带有标志 dateISO: true ，则一切正常。

运行以下代码sn-p：

$("#date").datepicker({
  dateFormat: 'yy-mm-dd'
});

$('form').validate({
  rules: {
    date: {
      required: true,
      dateISO: true
    }
  },
  messages: {
    date: {
      required: "Date required",
      dateISO: "Invalid date. Must be formatted yy-mm-dd"
    }
  }
});


$.validator.addMethod('date',
  function(value, element) {

    if (this.optional(element)) {
      return true;
    }

    var ok = true;
    try {
      $.datepicker.parseDate('yy-mm-dd', value);
    } catch (err) {
      ok = false;
    }
    console.log(ok)
    return ok;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<form>
  <input id="date" name="date" value='2018-01-02' />
</form>

看，它有效。

确定您真正需要的格式并设置正确的标志。