jQuery验证日期组

这是我在stackoverflow上的第一个问题。我搜索了一个解决方案，但我找不到任何解决方案。jQuery验证日期组

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

我将字段分组以获得日期只有一个错误消息。在验证中，我为所有字段指定了最小长度（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>

来源

2014-10-17 AdeZ

你为什么要使用jQuery验证插件的版本1.7？最新版本是1.13.0，从那以后，很多bug都被修复了。 – Sparky 2014-10-17 14:55:53

对不起，复制了错误的版本。在我使用版本1.12.0的现场版本中。我只是将它们全部更新到1.13.0，但这并没有改变任何东西。 – AdeZ 2014-10-17 15:21:32

您可以强制验证当焦点从DoB_year就发生：

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

来源

2014-10-17 13:22:32

这不是你将如何“强制验证”。 '.validate（）'方法只是你如何初始化插件，而不是触发验证。 – Sparky 2014-10-17 15:00:34

我错误的语法错误。我更新了我的答案。 – 2014-10-17 15:35:23

jQuery验证日期组

回答

相关问题