TypeError: jQuery(...).validate is not a function

Question

I am bringing a dynamic html content on to another html content. This is basically an edit form html view, but when I try to validate the from, it gives me "TypeError: jQuery(...).validate is not a function" error. I am using jQuery 1.6.2 version.

function validate_edit_venue() {
    jQuery('#venue_edit_form').validate({
        rules: {
            venueName: {
                required: true,
                minlength: 1,
                maxlength: 50
            },
            venueDescription: {
                required: false,
                lettersonly: true,
                maxlength: 150
            },
            venueType: {
                required: true
            }

        },
        messages: {
            venueName: {
                required: "Venue name is required",
                minlength: "Minimum 1  character required",
                maxlength: "Should not exceed 50 characters"
            },
            venueDescription: {
                maxlength: "Should not exceed 150 characters"
            },
            venueType: {
                required: "Please select a venue type"
            }

        }
    });
}

This is my jQuery validation. I am calling this function at the jQuery edit form script. Can anyone help me with this issue? This question maybe a duplicate but most of them are due to the jQuery version issue, so I couldn't obtain a proper answer through them.

      jQuery('#venue_edit_save').live('click', function(){

       validate_edit_venue();

       if(jQuery("#venue_edit_form").valid())
       {
            var directory_id = jQuery(this).attr('directory_id');
            var venue_type = jQuery(this).attr('venue_type');
            var venueName = jQuery('#venue_name').val();
            var venueDescription = jQuery('#description').val();
            var venueType = jQuery('#venue_types option:selected').val();
            var venueImage = jQuery('[name="profile_image'+directory_id+'"]').val();
            jQuery.blockUI();
            jQuery.ajax({
                    type: 'POST',
                    cache: false,
                    dataType: 'json',
                    url: baseurl+'catalog/catalog/action/venues/edit_venue',                
                    data:{'directory_id':directory_id,'venueName':venueName,'venueDescription':venueDescription,'venueType':venueType,'venueImage':venueImage},                

                    success: function(data)
                    {                    
                        if(data.status == 'success')
                        {
                        /*if(venue_type == venueType)
                        {
                            jQuery('#Venue_'+directory_id).replaceWith(data.html);
                        }
                        else
                        {
                            location.reload();                              
                        }*/
                            jQuery('#Venue_'+directory_id).replaceWith(data.html);
                            show_messages(data.status,data.msg);
                            setTimeout(jQuery.unblockUI);
                            jQuery('#edit-dining-venue-block').hide();
                            location.reload();
                        } 
                        else if(data.status == 401)
                        {
                            redirect_login_timed_out();                         
                        }
                    /*else
                    {
                        show_messages(data.status,data.msg);
                        setTimeout(jQuery.unblockUI);
                        jQuery('#edit-dining-venue-block').hide();
                    }*/
                    },
                    error:function (jqXHR)
                    {
                        if(jqXHR.status == 401)
                        {
                            redirect_login_timed_out();
                        }
                        setTimeout(jQuery.unblockUI);
                    }

            }); 
       }
  });

   // Hiding the edit venue view when clicking the cancel button
   jQuery('#venue_edit_cancel').live('click', function(){

       jQuery('#edit-dining-venue-block').hide();

   });              

});

This is where the error occurs. This jQuery saves the edited info: while validating.

Thanks.

jQuery .validation is a plugin, do you have the .js file besides the jQuery "normal" library file? — Sergio
– Sergio, Commented Jul 11, 2013 at 11:01
Yes. I have added all the necessary plugins needed including the validation plugin. — Sahan De Silva
– Sahan De Silva, Commented Jul 11, 2013 at 11:03
Make sure that jQuery-validation is compatible with jQuery version you're using. — Omar
– Omar, Commented Jul 11, 2013 at 11:04
Yes. The validation plugin is compatible with the jQuery version I'm using. Actually this error is occurring only in this dynamic html content. In other places, this error doesn't occur and the forms are validated properly. eg: in 'add' form, the validation is properly working, but in edit form, it's not working, instead it's giving the above mentioned error. Edit form is a dynamic html content. — Sahan De Silva
– Sahan De Silva, Commented Jul 11, 2013 at 11:06

mkoryak · Accepted Answer · 2013-07-11 11:43:41Z

3

This appears to me the case of your ajax call returning script tags.

I think what happens here is your ajax call returns DOM along with another jquery script tag which overwrites your jquery and you loose all your plugins, and other bad things happen

answered Jul 11, 2013 at 11:43

mkoryak

58.1k64 gold badges204 silver badges262 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sahan De Silva Over a year ago

True. I'm including some other php files which contain the script tags in them. So if that's the reason, I may have to look for another solution if the script tags overwrite, is it?

mkoryak Over a year ago

yes, this is your problem. ajax calls should return html without script tags. you may have to create a special file for it and not reuse existing ones

Sahan De Silva Over a year ago

I managed to solve this issue. I put jq instead jQuery and it worked. There's another js file running above my script, and in that script instead jQuery, jq has been used. So now it's working perfectly fine. Thank you for your help.

Collectives™ on Stack Overflow

TypeError: jQuery(...).validate is not a function

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related