Run JS Function After JQuery-Validation

Question

I have a WebForm that, once validated, writes to a database via a SQL query. I can get the validation to work independently. I can get the data to write independently (when I add an onclick event to the button). But I cannot get them to work in succession of each other. How do I invoke a javascript function after a successful jQuery Validation? Code can be seen below.

activitylog.html

<form action="javascript:;" id="form_rptActivityLog">
    <input id="txtShiftDate" type="text" class="form-control date-picker" name="txtShiftDate"/>
    <input type="submit" id="btnSave" value="Save" title="Save" class="btn blue-hoki" />
</form>

<script type="text/javascript">
function saveData() { // ... SQL DATA WRITE HERE ... // }
</script>

validation.js

var ValidationScripting = function() {


// ACTIVITY LOG ICON VALIDATION
var rptActivityLogValidation = function() {
    // for more info visit the official plugin documentation: http://docs.jquery.com/Plugins/Validation

    var form = $('#form_rptActivityLog');
    var error = $('.alert-danger', form);
    var success = $('.alert-success', form);

    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",  // validate all fields including form hidden input
        rules: {
            txtShiftDate: {
                required: true
            }
        },

        invalidHandler: function (event, validator) { //display error alert on form submit              
            success.hide();
            error.show();
            Metronic.scrollTo(error, -200);
        },

        errorPlacement: function (error, element) { // render error placement for each input type
            var icon = $(element).parent('.input-icon').children('i');
            icon.removeClass('fa-check').addClass("fa-warning");  
            icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
        },

        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group   
        },

        unhighlight: function (element) { // revert the change done by hightlight

        },

        success: function (label, element) {
            var icon = $(element).parent('.input-icon').children('i');
            //$(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
            //icon.removeClass("fa-warning").addClass("fa-check");
            $(element).closest('.form-group').removeClass('has-error')          // remove check mark for success
            icon.removeClass("fa-warning")
        },

        submitHandler: function (form) {
            success.show();
            error.hide();
            form.submit(); // submit the form
        }
    });


}


return {

    //main function to initiate the module
    init: function () {

        console.log('Activity Log Validation');
        rptActivityLogValidation();
    }

};

}();

The error I get is: JavaScript runtime error: Object doesn't support property or method 'submit'

Any help is greatly appreciated.

Answer 1

Any function that you want to run after validation but before the form submit would go inside of your submitHandler; it's no different than your success.show(), etc.

submitHandler: function (form) {
    // form is valid and ready to submit
    // do stuff here
    success.show();
    error.hide();
    form.submit(); // submit the form
}