1

jQuery Mobile の jQuery フォーム検証を学習しようとしています。私は複製しようとしているこのチュートリアルに出くわし続けていますが、リソースリンクで何か間違ったことをしているに違いありません。理論的には、ユーザーが Enter キーを押し、電子メールとパスワードのフィールドが空白の場合、「このフィールドは必須です」というメッセージがユーザーに表示されるはずです。

コード全体は次のとおりです。

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

1 に答える 1

5

通常、DOM 対応のイベント ハンドラー内で jQuery プラグインを初期化します。これにより、.validate()が呼び出されて初期化される前に HTML が構築されます。ご覧のとおり、HTML フォームが存在する前にそれを呼び出しています。これを ready イベント ハンドラー内に配置すると、ページの HTML が完全に構築されるまで、コードが起動されなくなります。

jQuery Mobile (ajaxページのロードに使用) を使用しているので、.on('pageinit')このようなハンドラーを使用します...

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

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

});

動作デモ: http://jsfiddle.net/5p9N5/

ブラウザからこのページの「ソースを表示」を実行して、スクリプトがどのように適切に含まれているかを確認してください。 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>

非 jQuery モバイル Web ページの場合、通常、jQuery コードを次の.ready()ようなハンドラーで囲みます...

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

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

    // any other jQuery

});
于 2013-03-28T19:35:36.727 に答える