2014-04-02 73 views
0

如何使jq-ui datepicker在jquery驗證引擎旁工作?使用jQuery驗證和jquery-ui datepicker

起初,我的datepicker工作之前,我把驗證。現在驗證器正在工作,但日期選擇器不是。

//datepciker 
    $(function() { 
     $("#datepicker").datepicker({ changeYear:true,changeMonth:true }); 
    }); 


//jqueryValidation 
     $(document).ready(function(){ 
      $("#form").validationEngine(); 
     }); 



    <fieldset> 
    <form id="form" method="post" action="post.php"> 
     <table> 
      <tr> 
       <td>NIP*</td> 
       <td><input class="validate[required,custom[onlyNumberSp]" 
       id="nip" maxlength="18" name="nip" size="20" type="text"></td> 
      </tr> 
      <tr> 
       <td>TMT*</td> 
       <td><input id="datepicker" name="tmt" type="text"></td> 
      </tr> 
     </table> 
    </form> 
</fieldset> 

回答

1

檢查下面的代碼,並確保您已正確加載所有js和css文件。此外,它似乎在您驗證的輸入類中缺少右括號「]」,儘管它實際上似乎沒有什麼區別。

此代碼在我的服務器上運行得非常好。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 

    <title>Validate</title> 

    <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/> 
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
    <script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script> 
</head> 

<body> 

    <fieldset> 
     <form id="form" method="post" action="post.php"> 
     <table> 
      <tr> 
       <td>NIP*</td> 
       <td> 
        <input class="validate[required,custom[onlyNumberSp]]" id="nip" maxlength="18" name="nip" size="20" type="text"/> 
       </td> 
      </tr> 
      <tr> 
       <td>TMT*</td> 
       <td> 
       <input id="datepicker" name="tmt" type="text"/> 
       </td> 
      </tr> 
     </table> 
    </form> 
</fieldset> 

<script type="text/javascript"> 
    //datepicker 
    $(function() { 
     $("#datepicker").datepicker({ changeYear:true,changeMonth:true }); 
    }); 


    //jqueryValidation 
    $(document).ready(function(){ 
     $("#form").validationEngine(); 
    }); 
</script> 

</body> 
</html>