using jquery validation and jquery-ui datepicker

Question

how to make jq-ui datepicker working beside jquery validation engine?

at first, my datepicker was working before I put the validator. now the validator is working but the datepicker is not.

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

Jonathan Eltgroth · Accepted Answer · 2014-04-02 05:03:00Z

Check the code below and make sure you have all js and css files loaded properly. Also it appeared you were missing a right bracket "]" in your validated input class, though it actually didn't appear to make a difference.

This code ran perfectly fine on my server.

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

Collectives™ on Stack Overflow

using jquery validation and jquery-ui datepicker

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related