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.

Answer 1

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