asp.net noob jquery + runat="server" vs declaring the form with all options
<p>I have a form, when I typed it out like this:</p>

<pre><code>&lt;form name="formLogin" id="formLogin" action="index.aspx" method="post"&gt;
</code></pre>

<p>My javascript works, and the source code of the webpage is the same as listed above.</p>

<p>When I type it out like this:</p>

<pre><code>&lt;form name="formLogin" id="formLogin" runat="server"&gt;
</code></pre>

<p>My page breaks down.  I am basically working with a third party template and trying to convert it to asp.net.</p>

<p>The source code that is displayed is this:</p>

<pre><code>&lt;form id="formLogin" action="index.aspx" method="post"&gt;
</code></pre>

<p>It seems when I use the <code>runat="server"</code> option it recreates the form element with no name?  Must I use <code>runtat="server"</code> if on .net and want to handle Jquery and Server side validation?</p>

<p>Will I still be able to validate in the code behind page if I do not include the <code>runat="Server"</code>?</p>

<pre><code>      $(document).ready(function () {     
            onfocus();
            $(".on_off_checkbox").iphoneStyle();
            $('.tip a ').tipsy({gravity: 'sw'});
            $('#login').show().animate({   opacity: 1 }, 2000);
            $('.logo').show().animate({   opacity: 1,top: '30%'}, 800,function(){           
                $('.logo').show().delay(1200).animate({   opacity: 1,top: '0%' }, 300,function(){
                    $('.formLogin').animate({   opacity: 1,left: '0' }, 300);
                    $('.userbox').animate({ opacity: 0 }, 200).hide();
                 });        
            })  
        }); 

        $('.userload').click(function(e){
            $('.formLogin').animate({   opacity: 1,left: '0' }, 300);               
              $('.userbox').animate({ opacity: 0 }, 200,function(){
                  $('.userbox').hide();             
               });
        });

    $('#but_login').click(function(e){              
          if(document.formLogin.username.value == "" || document.formLogin.password.value == "") // BREAKS HERE
          {
              showError("Please Input Username / Password");
              $('.inner').jrumble({ x: 4,y: 0,rotation: 0 });   
              $('.inner').trigger('startRumble');
              setTimeout('$(".inner").trigger("stopRumble")',500);
              setTimeout('hideTop()',5000);
              return false;
          }     
         hideTop();
         loading('Checking',1);     
         setTimeout( "unloading()", 2000 );
         setTimeout( "Login()", 2500 );
    }); 

function Login(){
    $("#login").animate({   opacity: 1,top: '49%' }, 200,function(){
         $('.userbox').show().animate({ opacity: 1 }, 500);
            $("#login").animate({   opacity: 0,top: '60%' }, 500,function(){
                $(this).fadeOut(200,function(){
                  $(".text_success").slideDown();
                  $("#successLogin").animate({opacity: 1,height: "200px"},500);                  
                });                           
             }) 
     }) 
    setTimeout( "window.location.href='dashboard.html'", 3000 );
}

$('#alertMessage').click(function(){
    hideTop();
});

function showError(str){
    $('#alertMessage').addClass('error').html(str).stop(true,true).show().animate({ opacity: 1,right: '0'}, 500);   

}

function showSuccess(str){
    $('#alertMessage').removeClass('error').html(str).stop(true,true).show().animate({ opacity: 1,right: '0'}, 500);    
}

function onfocus(){
                if($(window).width()&gt;480) {                   
                        $('.tip input').tipsy({ trigger: 'focus', gravity: 'w' ,live: true});
                }else{
                      $('.tip input').tipsy("hide");
                }
}

function hideTop(){
    $('#alertMessage').animate({ opacity: 0,right: '-20'}, 500,function(){ $(this).hide(); });  
}   

function loading(name,overlay) {  
      $('body').append('&lt;div id="overlay"&gt;&lt;/div&gt;&lt;div id="preloader"&gt;'+name+'..&lt;/div&gt;');
              if(overlay==1){
                $('#overlay').css('opacity',0.1).fadeIn(function(){  $('#preloader').fadeIn();  });
                return  false;
         }
      $('#preloader').fadeIn();   
 }

 function unloading() {  
        $('#preloader').fadeOut('fast',function(){ $('#overlay').fadeOut(); });
 }
</code></pre>
