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驗證日期組

回答

相關問題