Another Master page jQuery validation problem/question

I've searched the web to try to learn what I'm missing, but I just can't seem to get it. I'm using asp.net 4.0 (webforms obviously), master pages, and jQuery validation. Can someone tell me what I'm messing up?

In my case, I won't know anything about the fields that require validation, so I'd like to use the default method of just having the fields with the class="required email", etc.

The fields and submit button are just regular html, not ASP.NET controls (long story). When the page renders, the form is "form1", not aspnetForm as I've seen other people reference. When the submit button is clicked, it doesn't hit any of the javascript. It just posts back. It doesn't even popup the alert box.

What am I not referencing correctly?

Here is my simple javascript:

      $(document).ready(function () {
      alert('in js');
      document.getElementById('form1').validate({
          alert('in val');
      });

Page content:

 <fieldset>
   <legend>A simple comment form with submit validation and default messages</leg开发者_JAVA百科end>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input name="btnsubmit" id="btnsubmit" class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>

You have to close your functions and curly braces correctly. The bigger issue is that you should not reference the native DOM object, but a jQuery object. Your code should be:

$(document).ready(function(){
   alert('in js');
   $('#form1').validate({
      alert('in val');
   });
});

Your ready function can also be shortened to $(function(){...}); for simplicity.

Asp.net is only going to place one form on the page, so use $("form") to find it without knowing the id. Also, the validate options won't take the alert as you have it, but you can move it into the correct handlers as I've done below. Hope it helps...

$(function () {
    $("form").validate({
        submitHandler: function () {
            alert("submiting...");
            return false;
        },
        invalidHandler: function () {
            alert("invalid form");
            return false;
        }
    });
});

You should pass a jquery object for the validate plugin. You are trying to pass a DOM object to validate plugin, which obviously won't work.

So replace document.getElementById('form1') with $('#form1').

Now vaidation will happen smoothly.

You are using raw JS to reference the form and the .validate plug-in needs a jQuery object. Try this instead:

$(document).ready(function () {
  alert('in js');
  $('form').validate({
    alert('in val');
  });