Question

For some reason I don’t know why it says Error: validator.serialize is not a function.

$(document).ready(function() {
$('div.error_box').hide();
$('div.valid_box').hide();

NFDo( 'start' );

$('.formFooter .NFButton').click(function(e) {
    e.preventDefault();
    $('div.right_content').load('modules/' + $(this).attr('id'));
});

var container = $('div#errorContainer').hide();

var validator = $("#templatesForm").validate({
    errorPlacement: function(error, element) {
        error.appendTo(container);
    },
    errorContainer: container,
    errorLabelContainer: $("ol", container),
    wrapper: 'li',
    errorClass: "modFormError",
    rules: {
        description: {
            required: true
        },
        status: {
            required: true
        },
        header: {
            required: true
        },
        footer: {
            required: true
        }
    },
    messages: {
        description: {
            required: "Please enter a description!"
        },
        status: {
            required: "Please select a status!"
        },
        header: {
            required: "Please enter the header code!"
        },
        footer: {
            required: "Please enter the footer code!"
        }
    },
    invalidHandler: function(form, validator) {
        $("#errorContainer").show();
    },
    unhighlight: function(element, errorClass) {
        if (this.numberOfInvalids() == 0) {
            $("#errorContainer").hide();
        }
        $(element).removeClass(errorClass);
    },    
    submitHandler: function(form) {
        var dataString = validator.serialize();
        $.ajax({
            type: "POST",
            url: "processes/templates.php",
            data: dataString,
            dataType: 'json',
            success: function(data) {
                if (data.errorsExist) {
                    $("div.error_box").html(data.message).css("margin-left", "100px").css("width", "380px").show().delay(5000).hide("slow");
                } else {
                    $("div.valid_box").html(data.message).css("margin-left", "100px").css("width", "380px").show().delay(5000).hide("slow");
                    $(':input','#templatesForm')
                    .not(':submit, :button, :hidden, :reset')
                    .val('');
                    $('select').each(function(){
                        var option = $('option:selected', this).html();
                        var niceselect = $(this).parents('dd').find('.NFSelectRight');
                        niceselect.html(option);
                        $(this).parents('dd')
                        .find('.NFSelectTarget a')
                        .removeClass('NFOptionActive')
                        .filter(':first').addClass('NFOptionActive');
                    });
                }
            }
        });
        return false;
    }    
});

$('#reset').click(function(){
    $(':input','#templatesForm')
    .not(':submit, :button, :hidden, :reset')
    .val('');
    $('select').each(function(){
        var option = $('option:selected', this).html();
        var niceselect = $(this).parents('dd').find('.NFSelectRight');
        niceselect.html(option);
    });
});

});

Answer 1

I’ve never used jquery-validate, but this should fix it:

var dataString = $("#templatesForm").serialize();