jQuery mobile form validation with no results

前端未结

关注

 1  1449

I am trying to learn jQuery form validations for jQuery Mobile. I keep coming across this tutorial, which I am trying to replicate but must be doing something wrong with the

相关标签:

1条回答

無奈伤痛

2020-12-11 12:40

Typically, you'd initialize any jQuery plugin within a DOM ready event handler. This ensures the HTML is constructed before .validate() is called and initialized. As you can see, you're calling it up top before the HTML form exists. Putting it inside a ready event handler prevents the code from firing until after the page's HTML is fully constructed.

Since you're using jQuery Mobile (it uses ajax to load pages), use a .on('pageinit') handler like this...

$(document).on('pageinit', function() { // <-- ensures the DOM is ready

    $("#frmLogin").validate({
        // your rules & options
    });

});

Working DEMO: http://jsfiddle.net/5p9N5/

From your browser, do a "view source" of this page to see how the scripts are properly included. http://jsfiddle.net/5p9N5/show/....

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>jsFiddle demo</title>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
        <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>  
        <script type='text/javascript'>
        //<![CDATA[ 
            $(document).on('pageinit', function(){
                $('#myform').validate({ // initialize the plugin
                    // rules & options
                });
            });
        //]]>  
        </script>
    </head>
    <body>
        <form id="myform">
             .....
        </form>
    </body>
</html>

For a non-jQuery-mobile webpage, you'd typically enclose your jQuery code within a .ready() handler like this...

$(document).ready(function() { // <-- ensures the DOM is ready

    $("#frmLogin").validate({
        // your rules & options
    });

    // any other jQuery

});

0 讨论(0)