jquery validation error: .validate is not a function

Question

This is probably super obvious, but it is NOT working! I'm getting: TypeError: $(...).validate is not a function and Firebug points me to:

email: "Please enter a valid email address",

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

$(document).ready(function () {

    $("#register").click(function () {
        if ($("#frmRegisterWebuser").valid() === true) {
            $("#frmRegisterWebuser").submit();
        }
    });

    $("#frmRegisterWebuser").validate({
      rules:{
             reg_email:{
                        required: true,
                        email: true
                        },
             username: {
                       required: true,
                       minlength: 3
                       },
             zipcode: {
                       minlength: 5,
                       maxlength: 5
                       },
             reg_password: {
                       required: true,
                       minlength: 5
                       },
             confpass: {
                       required: true,
                       equalTo: "#reg_password",
                       }
      },
      messages:{
         username: {
                   required: "Please enter a username",
                   minlength: "Your username must consist of at least 3 characters"
                   },
         password: {
                   required: "Please provide a password",
                   minlength: "Your password must be at least 5 characters long"
                   },
        confirm_password: {
                          required: "Please provide a password",
                          minlength: "Your password must be at least 5 characters long",
                          equalTo: "Please enter the same password as above"
                          },
        email: "Please enter a valid email address",
      },

      submitHandler:function(){
          if($("#frmRegisterWebuser").valid() === true){
            email=$("#reg_email").val();
            password=$("#reg_password").val();
            username=$("#username").val();
            zipcode=$("#zipcode").val();
            default_private=$("#private").val();

             $.ajax({
                type: "POST",
                url: "webuser_register.php",
                data: "email="+email+"&pwd="+password+"&username="+username+"&default_private="+default_private+"&zipcode="+zipcode,
                success: function(response){
                  if(response == 'Registered')
                  {
                    $("#login_form").fadeOut("normal");
                $("#shadow").fadeOut();
                $("#profilex").html("<a id='logout' href='webuser_logout.php' title='Click to Logout'>Logout</a>");

                $("#shadow").slideUp();
                $("#register_webuser").slideUp();
                  }
                  else
                  {
                    $("#reg_add_err").html("Oops, there was a problem");
                  }
                },
                beforeSend:function()
                        {
                     $("#reg_add_err").html("Loading...")
                }
            });
          }
      }

    });

});
</script>

Could it be that I'm not actually submitting a form, but am ajaxing some data?

<div id="register_webuser">
        <div class="err" id="reg_add_err"></div>
  <form id="frmRegisterWebuser" action="login.php">
    <input type="hidden" id="private" name="private" />
        <label style="color:black;" for="reg_email" >Email:</label>
        <input type="email" id="reg_email" name="reg_email"  />
        <label style="color:black;" for="username" >Username:</label>
        <input type="text" id="username" name="username"  />
        <label style="color:black;" for="zipcode" >Zipcode:</label>
        <input type="text" id="zipcode" name="zipcode" />
        <label style="color:black;" for="reg_password" >Password:</label>
        <input type="password" id="reg_password" name="password"  />
        <label style="color:black;" for="confpass" >Confirm Password:</label>
        <input type="password" id="confpass" name="confpass"  />

        <div class="inputdata">
        <label style="color:black;" title="Share your shopping lists">Share:&nbsp;</label>
        <span>
        <div class="flatRoundedCheckbox" style="v-align:top;">
        <input type="checkbox" title="Share your shopping lists" id="share" name="share"  checked onclick="toggleShared(this.checked);" />
        </span>
        <label for="share" id="label_share"></label>
        <div class="clear"></div>
        </div>
        </div>

        <label></label><br/>
        <a id="register" href="#" class="greenbutton" >Register</a>
        <a id="reg_cancel_hide" href="#" class="greenbutton" >Cancel</a>
        <label></label><br/>

  </form>
</div>

Huh. That's an odd one. Are you sure `jquery.validate.min.js` is loading and running properly? — user1618143, Nov 06 '13 at 22:24
Where is your HTML markup? However, what you've posted is giving no errors: http://jsfiddle.net/wuJeW/ — Sparky, Nov 06 '13 at 22:25
You also don't need to capture the click event of the submit button. That part is automatic: http://jsfiddle.net/wuJeW/1/ — Sparky, Nov 06 '13 at 22:26
You've left out way too much code. If you're ajax'ing the data, then where is the ajax code? See this for proper placement: http://jsfiddle.net/wuJeW/2/ — Sparky, Nov 06 '13 at 22:27
it's showing me in firebug that it's getting jquery.min.js 304 in 56 ms, jquery.validate.min.js 304 in 34ms, etc etc — Jen Born, Nov 06 '13 at 22:29
You don't need all those click handlers! Put the ajax in the `submitHandler`. As per the documentation, _"that's where it belongs"_. See: http://jsfiddle.net/wuJeW/4/ — Sparky, Nov 06 '13 at 22:33
but i'm not submitting the form, i'm POSTing with ajax from an anchor tag. still? — Jen Born, Nov 06 '13 at 22:37
Okay yes, but only since it's an anchor tag and not a submit button would you need a `click` handler. However, you still need to put any ajax in the `submitHandler` as I already showed in my last jsFiddle: http://jsfiddle.net/wuJeW/4/ — Sparky, Nov 06 '13 at 22:49
Also any animations, etc. or anything else you want to fire off on a valid form would go into the `submitHandler` callback function. — Sparky, Nov 06 '13 at 23:03
Alright, I updated my code and the fiddle AND...the fiddle is working, but I'm getting THE SAME ERROR, only now it's firing on-> submitHandler: function() — Jen Born, Nov 07 '13 at 16:10
I think that the plugin must not be loading properly or it's conflicting with something else...I'm also using Foundation 4 on the page...Any tips on how to go from here? — Jen Born, Nov 07 '13 at 16:16

score 23 · Accepted Answer · answered Nov 07 '13 at 20:55

23

I'm the biggest dummy ever. Nonetheless, perhaps this will help someone else.

The issue was that I was including 2 different versions of jQuery on the same page: both 1.9.0 and 1.10.2

Thanks everyone so much for your help!

answered Nov 07 '13 at 20:55

Jen Born

741
1
6
20

1

it did help and probably saved me hours of head banging as I could have never imagined this! Thanks bro! – Subliminal Hash Jul 20 '15 at 07:11
To whom it may concern, this can also be caused by a stale cache. – StvnW Oct 22 '16 at 22:12
Also ensure that JQuery is declared BEFORE the validate library. See: http://stackoverflow.com/questions/1871424/form1-validate-is-not-a-function – Purpletoucan Jan 29 '17 at 19:33
thnak you so much. you save my time – YoungHyeong Ryu Aug 23 '19 at 03:16

score 0 · Answer 2 · answered Nov 01 '17 at 03:26

0

In my case I was loading jquery 2 times. Commented one and started to work.

<script         
    src="<c:url value="/resources/plugins/jQuery/jQuery-2.1.4.min.js"/>">
</script>

answered Nov 01 '17 at 03:26

Siddharth

9,349
16
86
148

jquery validation error: .validate is not a function

2 Answers2

Linked

Related