Question

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

我正在构建一个表单，我正在使用jQuery-validation插件来验证它。在表格中，我有3个出生日期的输入字段（DD / MM / YYYY）。

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

当我输入日期时，验证工作正常。但是如果最后输入的字段确实有效，那么错误消息就消失了！（我做了一些不错的截图，但我还不允许发布图片。）

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

尝试输入D / M / YYYY的日期，然后将焦点移至“somefield”或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>

Answer 1

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

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

jQuery验证日期组

1 个答案: