CODEWITHSUNDEEP
jqueryasp.netmaster-pages
scojomodena
scojomodena

Reputation: 842

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

Upvotes: 0

Views: 2529

Answers (4)

Abdul Kader
Abdul Kader

Reputation: 5842

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.

Upvotes: 1

ShaneBlake
ShaneBlake

Reputation: 11096

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

Upvotes: 1

ventaur
ventaur

Reputation: 1851

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

Upvotes: 0

DarthJDG
DarthJDG

Reputation: 16591

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.

Upvotes: 3

Related Questions