CODEWITHSUNDEEP
jqueryjquery-mobilejquery-validate
Die 20
Die 20

Reputation: 261

jQuery mobile form validation with no results

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 resource links cause the html looks good. In theory, when a user hits enter and the email and password field are blank, a message should appear telling the user that "this field is required".

Here is the entire code:

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script type="text/javacsript">
    $( "#frmLogin" ).validate({
        submitHandler: function( form ) {
            alert( "Call Login Action" );
        }
    });


</script>
<style type="text/css">
label.error {
    color: red;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.4;
    margin-top: 0.5em;
    width: 100%;
    float: none;
}

@media screen and (orientation: portrait){
    label.error { margin-left: 0; display: block; }
}

@media screen and (orientation: landscape){
    label.error { display: inline-block; margin-left: 22%; }
}

em { color: red; font-weight: bold; padding-right: .25em; }

</style>


</head>
<body>
<div data-role="page" id="login">

  <div data-role="header">
     <h1>Acme Corporation</h1>
  </div>

  <div data-role="content">

    <form id="frmLogin">
      <div data-role="fieldcontain">
        <label for="email">
          <em>* </em> Email: </label>
          <input type="text" id="email" 
            name="email" class="required email" />
      </div>

      <div data-role="fieldcontain">
        <label for="password"> 
          <em>* </em>Password: </label>
          <input type="password" id="password" 
            name="password" class="required" />
      </div>

      <div class="ui-body ui-body-b">
        <button class="btnLogin" type="submit" 
          data-theme="a">Login</button>
      </div>
    </form>

  </div>

</div>



</body>
</html>

Upvotes: 1

Views: 5170

Answers (1)

Sparky
Sparky

Reputation: 98718

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

});

Upvotes: 5

Related Questions