使用 jquery 验证和 jquery-ui datepicker

Posted

技术标签:

【中文标题】使用 jquery 验证和 jquery-ui datepicker【英文标题】:using jquery validation and jquery-ui datepicker 【发布时间】:2014-05-13 02:39:13 【问题描述】:

如何让 jq-ui datepicker 在 jquery 验证引擎旁边工作?

起初,我的日期选择器在我放置验证器之前正在工作。现在验证器正在工作,但日期选择器没有。

//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>

【讨论】:

以上是关于使用 jquery 验证和 jquery-ui datepicker的主要内容,如果未能解决你的问题,请参考以下文章

在另一个 <script> 标签中打开 Jquery-ui 对话框

jquery-ui.css 和 jquery-ui.css 有啥区别?s2j=3.3.1 [重复]

如何将 jQuery 和 jQuery-ui 与 Parcel(捆绑器)一起使用?

如何使用 jquery-ui 和 Django 创建模式登录表单

Rails 3.1 和 jquery-ui 资产

错误:来自Dojo和jQuery-UI冲突的multipleDefine