How can I use appframework UI with jQuery and jQuery.Validate?

[Jim_A_1]

Dear XDK experts,

I created a AppFramework project with intel XDK (ver. 1912), and created one button with click event via the app designer. The following js code is created in the index_user_scripts.js file. The code works fine. When I click the button, the alert pops up. However, when I uncommented the initValidation() in the event_handlers(), the click event won't work and I will get error messages saying jquery is not defined. I doubled checked the include path and verified the jquery js file is in the js folder (I downloaded and saved in the js folder). I have shown the index_user_scripts.js, the header of the index.html file and the error message below. Any help will be greatly appreciated. I have searched online and some said jquery and appframework UI cannot be used together. Is it still true?

BTW, does appFramework has built-in ability to do form validation? Is jquery.validate the best for form validate? If not, which one is the best for a xdk project? Thanks!

//===== Content of the index_user_scripts.js file =====//

(function()
{
 "use strict";
 /*
   hook up event handlers 
 */
 function register_event_handlers()
 {
    initValidation();

     /* button  Button */
    $(document).on("click", ".uib_w_2", function(evt)
    {
        /* your code goes here */ 
        alert("Button is clicked.");
    });
    
 }
 document.addEventListener("app.Ready", register_event_handlers, false);
})();

function initValidation()
{

    $("#loginForm").validate
    
    (
     
        {
            
            rules: 
            {
                txt_login_email:
                {
                    required: true,
                    email: true
                }
            }
            ,messages:
            {
                txt_login_email: "Please enter a valid email address"
            }
            
        }
        
    );
}

//======= index.html header =========//

.........

        <script src="cordova.js" id="xdkJScordova_"></script>

        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
        <!--            
            You may substitute jQuery for the App Framework selector library.
            See http://app-framework-software.intel.com/documentation.php#afui/afui_jquery
        -->
        <script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
        <script type="application/javascript" src="app_framework/2.1/appframework.ui.js" data-ver="1"></script>

        <script src="js/jquery-1.1.1.js"></script>
      
        <script src="js/jquery.validate.min.js"></script>

        <script type="application/javascript" src="js/index_user_scripts.js"></script>

.........

//====== Error messages after include the jquery.js ======//

Uncaught ReferenceError: jQuery is not defined jquery.validate.min.js:4
Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:58889/http-services/ui-builder/web/unit_tests/utils/test_styleparsing.css

[Hamilton_Tenório_da_]

You can´t use appframework.js and jquery.js. 

<script type="application/javascript" src="app_framework/2.1/appframework.js"></script>
<script src="js/jquery-1.1.1.js"></script>

You need to change the order of the lines and the name of the second one. I use:

<script type="application/javascript" src="js/jquery-2.1.3.js"></script>
<script type="application/javascript" src="js/jq.appframework.min.js"></script>
<script type="application/javascript" src="js/appframework.ui.js"></script>
<script type="application/javascript" src="js/jquery-ui.min.js"></script>

And it works well.

[Jim_A_1]

Thanks! I tried to include js/jq.appframework.min.js and js/appframework.ui.js after I downloaded them from github, but it still does not work. However, after I use the jquery-2.1.3 instead of 1.1.1, it works perfectly! Thanks so much for your help!