validating AJAX jquery submission form

Question

Is there a way to validate my script before submission, i.e pick up things as unfilled fields, incorrect emails etc

I am currently using expression engine's plugin freeform how it the plugin itself does not have any validation. Therefore i am trying to create a simple function myself.

I am receiving an error message saying the following

Uncaught TypeError: $(...).validate is not a function

below is a snippet of my code.

var form = $('#ajax-contact');
var formMessages = $('#form-messages');
$(form).submit(function (e) {
    e.preventDefault();
    var formData = $(form).serialize();
    // Submit the form using AJAX.
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    }).done(function (response) {
        if (response.success) {
            formMessages.removeClass('error').addClass('success').text("Thank you for submitting your details");
            $(".form-control").validate({
                rules: {
                    name: {
                        ranagelength: [2, 40],
                        required: true
                    },
                    email: {
                        ranagelength: [2, 40],
                        email: true,
                        required: true
                    },
                    errorClass: "error",
                    highlight: function (label) {
                        $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
                    }
                }
            });
        } else {
            formMessages.removeClass("success").addClass("error").text("Oops, Please check your details");
        }
    }).fail(function (data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success');
        $(formMessages).addClass('error');
        // Set the message text.
        if (data.responseText !== '') {
            $(formMessages).text(data.responseText);
        } else {
            $(formMessages).text('Oops! An error occured and your message could not be sent.');
        }
    });
});

Answer 1

You can try jquery validation valid() method.Refer this link and define your rule on ready event then only check like below.

$(document).ready(function () {
    $("#formid").validate({
        rules: {
            name: {
                ranagelength: [2, 40],
                required: true
            },
            email: {
                ranagelength: [2, 40],
                email: true,
                required: true
            },
            errorClass: "error",
            highlight: function (label) {
                $(label).closest('.form-group').removeClass('has-success').addClass('has-error');
            }
        }
    });
});

if ($("#formid").valid()) {
    //form is valid
} else {
    //forem is invalid
}