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.
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.
Share Improve this question edited Jul 11, 2013 at 11:12 Sahan De Silva asked Jul 11, 2013 at 11:00 Sahan De SilvaSahan De Silva 4711 gold badge8 silver badges23 bronze badges 8- jQuery .validation is a plugin, do you have the .js file besides the jQuery "normal" library file? – Sergio Commented Jul 11, 2013 at 11:01
- Yes. I have added all the necessary plugins needed including the validation plugin. – Sahan De Silva Commented Jul 11, 2013 at 11:03
- Make sure that jQuery-validation is patible with jQuery version you're using. – Omar Commented Jul 11, 2013 at 11:04
- 1 Please also show us how you're including your scripts. – André Dion Commented Jul 11, 2013 at 11:05
- Yes. The validation plugin is patible 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 Commented Jul 11, 2013 at 11:06
1 Answer
Reset to default 3This 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