jquery form validation: validation script specified externally

Question

i have a jquery form validation in the master page and it works fine and i got that working from this article: http://www.dotnetcurry.com/ShowArticle.aspx?ID=310

my question is: if i place the .js to external and add a reference to my page then its not working... it says object expected

here is how i have done:

in my content page (i am using master page, asp.net )

add in my content page:

<script src="myform_validation.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {       
        ValidateMe(this);
    });
</script>

below is in the external .js file:

 function ValidateMe() { 

            $("#aspnetForm").validate({
                rules: 
                {
                        <%=TextBox1.UniqueID %>: 
                        {
                            maxlength:1,
                            //minlength: 12,
                            required: true
                        },
                         <%=TextBox2.UniqueID %>: 
                        {
                            minlength: 12,
                            required: true
                        },
                         <%=TextBox3.UniqueID %>: 
                        {
                            minlength: 12,
                            required: true
                        }//,
//                    
                },          
                messages: 
                    {
                        <%=TextBox1.UniqueID %>:
                        { 
                            required: "Enter your firstname", 
                            minlength: jQuery.format("Enter at least {0} characters") 
                        },
                         <%=TextBox2.UniqueID %>:
                        { 
                            required: "Please enter a valid email address",
                              minlength: "Please enter a valid email address"
                        }  ,
                          <%=TextBox3.UniqueID %>:
                        { 
                            required: "Enter your firstname", 
                            minlength: jQuery.format("Enter at least {0} characters") 
                        }

                     }    , 


          success: function(label) {
            // set &nbsp; as text for IE
            label.html("&nbsp;").addClass("checked");
        }

        });
        } ;

Answer 1

I suspect its because your server tags (<%=TextBox1.UniqueID%>) are not being processed by the server. By default IIS does not process .js files.

Answer 2

1. For starters try to always use the same identified for jQuery. Sometimes you use jQuery and sometimes $, I would recommend to use $ all the way but just because its shorter and well known (and im lazy ;) ).
2. You are passing this into the external ValidateMe function, even though it has no parameters. Are you sure you extracted the function properly?
3. And always make sure all js files are referenced before you start using functions within them.

Answer 3

Why are you attempting to put the javascript into an external file? The script is specific to controls on the page, so leave it there. Otherwise you are adding latency to the page by requiring an extra file download.