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

Answer 1

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;
        }
    });
});