title: how to apply validation on dialog form using jquery validation plugin?
body: <p>i m trying to open a dialog on click of a button and opened dialog contains a login form including username and password and signin button.here is my code of html to open a dialog:
  HTML CODE:
   </p>
  
  <pre><code>&lt;body&gt;
  &lt;div data-role="page"&gt;
   &lt;div data-role="header" data-theme="e"&gt;
   &lt;h3&gt;PRAYERS APP&lt;/h3&gt;
   &lt;/div&gt;
  &lt;div data-role="content"&gt;
     &lt;div class="center-wrapper"&gt;
        &lt;a href="#login_box"  id="showdialog" data-transition="pop" data-rel="dialog" data-role="button" data-icon="plus" data-theme="e"&gt;USER LOGIN AREA&lt;/a&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
   &lt;/div&gt;
  
  
  &lt;div data-role="dialog" id="login_box" class="login-popup" data-dismissible="false"&gt;
  
  &lt;a href="#" id="closeBtn" class="ui-btn-right" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext"&gt;close btn&lt;/a&gt;  
  
   &lt;div data-role="content"&gt;
      &lt;div class="ui-body ui-body-b"&gt;
              &lt;form name="login" id="formlogin" method="get" action="" accept-charset="utf-8"&gt;
  
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;label for="username"&gt;USER NAME:&lt;/label&gt;&lt;br/&gt;
                      &lt;input type="text" name="username" id="usrname" placeholder="your name"/&gt;&lt;br/&gt;
                  &lt;/div&gt;
  
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;label for="password"&gt;PASSWORD:&lt;/label&gt;&lt;br/&gt;
                      &lt;input type="password" name="password" id="usrpswd" placeholder="please enter your password"/&gt;&lt;br/&gt;
                  &lt;/div&gt;
  
                  &lt;fieldset class="ui-grid-a"&gt;
                   &lt;div class="ui-block-a"&gt;
                   &lt;a href="#" id="signinbtn" data-role="button" data-theme="b" data-icon="check" style="text-align:center; float:right;"&gt;SIGN  IN&lt;/a&gt;&lt;/div&gt;
                  &lt;/fieldset&gt;
  
                  &lt;/form&gt;
                      &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;/div&gt;
  &lt;!--  -----login page   end-------------------&gt;                        
  &lt;/body&gt;
  </code></pre>
  
  <p>one more problem when i click on "user login area button" its showing me dialog on another page while i want to open a dialog on same page:
   JS CODE TO APPLY FADEIN AND FADEOUT: </p>
  
  <pre><code>&lt;head&gt;
  &lt;script&gt;
  $(document).ready(function()
   {
  &lt;!-- ///////////////////////////////login dialog and its validation start//////////////////////////////////////////////////////////--&gt; 
  
      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('&lt;div id="mask"&gt;&lt;/div&gt;');
              $('#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;
            });
     });
  &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>now geting problem to apply validation on textbox of opened dialog for that reason i m using this code but its not working:i m applying this code in script tag</p>
  
  <pre><code>$('#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")
      }
  
      }
      } 
      }
      });
  </code></pre>
  
  <p>moreover Signin button of dialog  is not clickable and failed to fire this function:</p>
  
  <pre><code>  $('#signinbtn').on('click',function()
              {
                  alert("eerer");
                  doLogin();
  
  
              });   
  </code></pre>
  
  <p>i want such type of validation here is fiddle:
          <a href="http://jsfiddle.net/erum/Ztn2a/" rel="nofollow">formvalidation</a> 
  i have already applied all jquery plugins in  my project:</p>