Question

我的表单带有日期选择器的输入，我尝试在输入中更改数据时验证格式日期，如"yyyy-mm-dd"。我安装jquery-form-validator并像这样写

<form id="filter-form" action="my action" method="get">
  <input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy" data-validation-format="yyyy-mm-dd">
</form>

$(document).ready(function() {
  var filterForm = $('#filter-form');

  filterForm.validate({
    rules: {
      from_datepicker: {
        required: true,
        date: true
      }
    }
  });

  $('#to_datepicker').datepicker({
    dateFormat: 'dd.mm.yy',
    showAnim: "drop",
    changeMonth: true,
    changeYear: true,
    showWeek: true
  });

$('.hasDatepicker').on('change', function () {
    filterForm.submit()
});

然后我尝试在输入中写入一些数据，如11111，但未调用jquery-form-validator。我该如何使用这个插件？

Answer 1

如果您想使用jquery验证插件验证日期，请确保已在头标记中包含此js文件。

当您使用其他方法时，需要此js。

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

另外，请确保您还包含验证min文件，这是您在使用jquery验证插件时必须的：

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

此外，在您的代码中，我可以看到，您的元素名称为to_date，在您的验证中，您放置了from_datepicker。

因此，还要输入要验证的名称。如果要验证to_date，则验证码应为：

var filterForm = $('#filter-form');
filterForm.validate({
    rules: {
      to_date: {
        required: true,
        date: true
     },
    messages:{
       to_date:{
         required: "Date is required",
         date:"enter date only"
       }
    }
   }
});

Answer 2

您无需验证日期。将该输入字段设为只读。

显示日期选择器：

将以下代码放在头标记内。

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <!--do not include this jquery min file if it is already there, otherwise it may conflict-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#to_datepicker" ).datepicker({
      dateFormat: 'dd-mm-yy',
      showAnim: "drop",
      changeMonth: true,
      changeYear: true,
      showWeek: true
  });
});
</script>

并将readonly属性与您的输入标记放在一起：

<input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy" data-validation-format="yyyy-mm-dd" readonly >

Jquery-form-validator验证datepicker中的格式日期

2 个答案: