Question

I have the following code to enable validation work:

$(document).ready(function() {

    $("#eventForm").validate({
        rules: {
            startDate: "required",
            startTime: "required",
            endDate: {
                required: function (element) {
                    var endTimeValue = $('#endTime').val();
                    return (endTimeValue != null && endTimeValue != '');
                }
            },
            endTime: {
                required: function (element) {
                    var endDateValue = $('#endDate').val();
                    return (endDateValue != null && endDateValue != '');
                }
            }
        },
        messages: {
            startDate: "Please enter event local start date",
            startTime: "Please enter event local start time"
        },
        errorPlacement: function (error, element) {
            error.appendTo(element.parent().next());
        },
        submitHandler: function (form) {
            var options = {
                dataType: 'json',
                success: eventCreationSuccess,
                error: eventCreationError
            };
            alert('submit');
            //$(form).ajaxSubmit(options);
        }
    });
 });

But validation plugin doesn’t catch submit – default submit is executed.

jQuery and validation plugin scripts are imported.

Answer 1

You need to give your form an id of eventForm

<form name="eventForm" id="eventForm" method="post">

You given it a name, but not an id. Also, the sample you provided from pastebin.com looks incomplete, it is missing the form controls.

Here is a super basic sample:

<form name="eventForm" method="post" id="eventForm">
    <input type="text" name="name" id="name" class="required"/>
    <input type="submit" class="submit" value="Submit"/>
</form>