0

ボタンをクリックしてダイアログを開こうとすると、開いたダイアログにユーザー名とパスワードを含むログインフォームとサインインボタンが含まれています。ダイアログを開くためのhtmlのコードは次のとおりです: HTMLコード: 

<body>
<div data-role="page">
 <div data-role="header" data-theme="e">
 <h3>PRAYERS APP</h3>
 </div>
<div data-role="content">
   <div class="center-wrapper">
      <a href="#login_box"  id="showdialog" data-transition="pop" data-rel="dialog" data-role="button" data-icon="plus" data-theme="e">USER LOGIN AREA</a>
   </div>

</div>
 </div>


<div data-role="dialog" id="login_box" class="login-popup" data-dismissible="false">

<a href="#" id="closeBtn" class="ui-btn-right" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext">close btn</a>  

 <div data-role="content">
    <div class="ui-body ui-body-b">
            <form name="login" id="formlogin" method="get" action="" accept-charset="utf-8">

                <div data-role="fieldcontain">
                    <label for="username">USER NAME:</label><br/>
                    <input type="text" name="username" id="usrname" placeholder="your name"/><br/>
                </div>

                <div data-role="fieldcontain">
                    <label for="password">PASSWORD:</label><br/>
                    <input type="password" name="password" id="usrpswd" placeholder="please enter your password"/><br/>
                </div>

                <fieldset class="ui-grid-a">
                 <div class="ui-block-a">
                 <a href="#" id="signinbtn" data-role="button" data-theme="b" data-icon="check" style="text-align:center; float:right;">SIGN  IN</a></div>
                </fieldset>

                </form>
                    </div>
                      </div>
                       </div>
<!--  -----login page   end------------------->                        
</body>

「ユーザーログインエリアボタン」をクリックすると、同じページでダイアログを開きたいときに別のページにダイアログが表示されるというもう1つの問題：フェードインとフェードアウトを適用するJSコード：

<head>
<script>
$(document).ready(function()
 {
<!-- ///////////////////////////////login dialog and its validation start//////////////////////////////////////////////////////////--> 

    var loginBox;
          $('#showdialog').click(function()
         {
            loginBox = $(this).attr('href'); 
            //Fade in the Popup and add close button
            $(loginBox).fadeIn(250);
            //Set the center alignment padding + border
            var popMargTop = ($(loginBox).height() + 24) / 2;
            var popMargLeft = ($(loginBox).width() + 24) / 2;

            $(loginBox).css({
                'margin-top': -popMargTop,
                'margin-left': -popMargLeft
                });
            $('body').append('<div id="mask"></div>');
            $('#mask').fadeIn(250);

            return false;
         });

        // When clicking on the close button  or the mask layer the popup closed
         $('#closeBtn, #mask').live('click',function()
          {
             $('#mask, .login-popup').fadeOut(250,function()
                {
                 $('#mask').remove(); 
                });
             return false;
          });
   });
</script>
</head>

そのため、開いたダイアログのテキストボックスに検証を適用する際に問題が発生していますが、このコードを使用していますが、機能していません:スクリプトタグでこのコードを適用しています

$('#login_box').dialog(
    {
    open: function(event,ui)
    {
    $('#formlogin').validate()
    {
    rules:
    {
    username:
        {required: true,
        minlength: 4
        },
        }
    password:
      {required: true,
      minlength: 8
      }
    },
     messages:
     {
     username: 
     {required:"pls enter user name",
     minlength: $.format("Keep typing, at least {0} characters required!"),
     }
    password:
     {
     required:"pls enter password",
     minlength: $.format("password should be atleast {0} characters")
    }

    }
    } 
    }
    });

さらに、ダイアログのサインインボタンはクリックできず、この機能を起動できませんでした:

  $('#signinbtn').on('click',function()
            {
                alert("eerer");
                doLogin();


            });

ここでそのようなタイプの検証が必要です: formvalidation 私は自分のプロジェクトですべての jquery プラグインを既に適用しています:

4

1 に答える 1

0

.validate()フォームでプラグインを初期化するメソッドです。1 レベル上に移動して、DOM 対応ハンドラーのすぐ内側になるようにします。

また、コード内に多くの構文エラーがあります.validate()。適切なインデントと書式設定により、それらを簡単に見ることができます...

$('#formlogin').validate() { // <-- should be .validate({
    rules: {
        username: {
            required: true,
            minlength: 4
        },
    } // <-- extra } puts password outside of rules
    password: {
        required: true,
        minlength: 8
    }
},
messages: {
    username: {
        required: "pls enter user name",
        minlength: $.format("Keep typing, at least {0} characters required!"), // <-- extra comma
    } // <-- missing a comma
    password: {
        required: "pls enter password",
        minlength: $.format("password should be atleast {0} characters")
    }

}
} // <-- should be a });

これは適切にフォーマットされています...

$(document).ready(function () {

    $('#formlogin').validate({
        rules: {
            username: {
                required: true,
                minlength: 4
            },
            password: {
                required: true,
                minlength: 8
            }
        },
        messages: {
            username: {
                required: "pls enter user name",
                minlength: $.format("Keep typing, at least {0} characters required!")
            },
            password: {
                required: "pls enter password",
                minlength: $.format("password should be atleast {0} characters")
            }
        }
    });

});

簡単なデモ: http://jsfiddle.net/qzdyk/

デモ用にsubmitボタンを追加しました。プラグインは、およびのイベントをform自動的にキャプチャして処理します。click<input type="submit" /><button>click</button>

于 2013-04-18T15:13:30.070 に答える