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

Posted 2023-05-09

【中文标题】JQUERY Datepicker - 从 datepicker 选择日期后验证错误不会消失

【英文标题】：JQUERY Datepicker - validation error doesn't go away after selecting a date from datepicker

【发布时间】：2018-07-06 21:06:09

【问题描述】：

我正在使用 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>

【问题讨论】：

如果 sn-p 不起作用，创建它有什么意义

不知道为什么它不能在 chrome 中工作，在 IE 和 firefox 中工作正常。我实际上发布了一个指向我的小提琴jsfiddle.net/m7wMe/16 的链接，但我认为管理员将其更改为 sn-p。

【参考方案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>

看，它有效。

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

【讨论】：

当用户输入错误的日期格式时，假设会显示错误。您的 sn-p 没有显示任何错误并接受 2018-21-21 。就日期格式而言，我将使用 dd/mm/yy 日期格式。