如何使用jQuery驗證插件在對話窗體上應用驗證？

我嘗試打開一個按鈕的點擊一個對話框，打開對話框包含一個登錄表單包括用戶名和密碼，登入button.here是我的HTML代碼來打開一個對話框： HTML代碼：如何使用jQuery驗證插件在對話窗體上應用驗證？

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

，當我在「用戶登錄區按鈕」，它顯示我在另一頁對話框中單擊而我想打開同一個頁面上的對話多了一個問題： 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>

現在歌廳在t上應用驗證的問題使用此代碼，但由於這個原因IM打開的對話框中extbox它不工作：IM腳本標籤應用此代碼

$('#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插件：

來源

2013-04-18 nida

太多的信息可以概括這個嗎？ –

這是@Sparky的工作。 – Gajotres

我只想在對話框FORM上應用驗證。已經在對話框中應用了「淡入」和「淡出」功能，但不幸的是，其在另一頁上的打開對話框和其背景是黑色的。此外，讓我知道如何應用窗體上的驗證（在對話框中）並應用任何對話框按鈕的點擊功能？ – nida

.validate()爲fo的方法r 初始化表單上的插件。將它向上移動一層，以便它立即位於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。該插件將自動捕獲並處理<input type="submit" />和<button>click</button>的click事件。

來源

2013-04-18 15:13:30 Sparky

如何使用jQuery驗證插件在對話窗體上應用驗證？

回答

相關問題