jQuery 验证日期组答案

【问题标题】：jQuery validate date groupjQuery 验证日期组
【发布时间】：2014-10-17 13:03:06
【问题描述】：

这是我关于 stackoverflow 的第一个问题。我搜索了一个解决方案，但我找不到任何解决方案。

我正在构建一个表单，并使用 jQuery-validation 插件对其进行验证。在表格中，我有 3 个输入字段，用于输入出生日期 (DD/MM/YYYY)。

我对字段进行了分组，以便在该日期只收到一条错误消息。在验证中，我为所有字段（2、2 和 4 以获取 DD/MM/YYYY）指定了 minlength。

当我输入一个日期时，验证正在运行。但是如果最后输入的字段确实有效，那么错误消息就消失了！（我做了一些漂亮的截图，但我还不能发布图片。）

我做了一个JSFiddle来澄清这个问题：

JSFiddle demo

尝试输入 D/M/YYYY 的日期，然后将焦点移至“某个字段”或 D/MM/YYYY。

关于解决方案的任何想法？我做错了什么？

<!DOCTYPE html>
<html>
<head>    

  <script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>

  <style type='text/css'>
    input[type="text"]{
        border:0px;
    }

    .input_container{
        float:left;
        padding:5px;
        margin:5px;
        border: 1px solid black;
        border-radius: 3px;
    }

    .btn_container{
        clear:both;
        margin:5px;    
    }

    div.error{
        border: 2px solid #FF0000;
    }

    label.error{
        font-weight:bold;
        color: #FF0000;
    }
  </style>

<script type='text/javascript'>//<![CDATA[ 
$(document).ready(function(){
$('#frm').validate({
    rules:{
        DoB_day:{
            required: true,
            minlength: 2
        },
        DoB_month:{
            required: true,
            minlength: 2
        },
        DoB_year:{
            required: true,
            minlength: 4
        }    
    },

    groups:{
        dateOfBirth: "DoB_day DoB_month DoB_year"
    },

    messages:{
        DoB_day:{
            required: "Please enter a date",
            minlength: "Format the day as DD"
        },
        DoB_month:{
            required: "Please enter a date",
            minlength: "Format the month as MM"
        },
        DoB_year:{
            required: "Please enter a date",
            minlength: "Format the year as YYYY"
        }                   
    },  

    highlight: function(element){
      $(element).parent('div').addClass('error');
    },

    unhighlight: function(element){
      $(element).parent('div').removeClass('error');
    },  

    errorLabelContainer: ".error",

});
});//]]>  

</script>

</head>

<body>
  <form id="frm" name="frm" method="POST">

    <div class="input_container">
        <input type="text" id="DoB_day" name="DoB_day" size="1" placeholder="DD"/> /
        <input type="text" id="DoB_month" name="DoB_month" size="1" placeholder="MM" /> /
        <input type="text" id="DoB_year" name="DoB_year" size="3" placeholder="YYYY" />
    </div>

    <div class="input_container">
        <input type="text" id="somefield" placeholder="somefield" />
    </div>

    <div class="btn_container">
        <input type="submit" value="submit" />    
    </div>

</form>

<label class="error"> &nbsp; </label>

</body>


</html>

【问题讨论】：

您为什么使用 1.7 版的 jQuery Validation 插件？最新版本是 1.13.0，从那时起已经修复了很多错误。
对不起，复制了错误的版本。在实时版本中，我使用的是 1.12.0 版本。我刚刚将它们全部更新到 1.13.0，但这并没有改变任何东西。

标签： jquery date jquery-validate

【解决方案1】：

当焦点从 DoB_year 丢失时，您可以强制进行验证：

$("#DoB_year").blur(function () {
    $('#frm').valid();
});

【讨论】：

这不是您“强制验证”的方式。 .validate() 方法只是您初始化插件的方式，而不是触发验证。