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.

Can you show us how you're calling the submitHandler method? — tdc
– tdc, Commented Nov 12, 2015 at 16:29
Just a question, you are calling form.validate then why are you calling form[0].submit. Shouldn't it be form.submit — Rajesh Dixit
– Rajesh Dixit, Commented Nov 12, 2015 at 16:31
@Rajesh form.submit() would fire any submit event bound using jQuery, not form[0].submit() — A. Wolff
– A. Wolff, Commented Nov 12, 2015 at 16:35
But then shouldn't form be an array to use form[0].submit? The error clearly says that form[0] (object) doesn't have a submit event — Rajesh Dixit
– Rajesh Dixit, Commented Nov 12, 2015 at 16:36
Why are you putting the .validate() method inside of a function? The .validate() method is just used for initializing the Validate plugin on your form and only needs to be called once within the DOM ready event handler. And like everyone else said, you just need form.submit()... however, if there is nothing else inside of your submitHandler option, you can remove it entirely, as your code is nearly identical to the default. — Sparky
– Sparky, Commented Nov 12, 2015 at 16:51

Sparky · Accepted Answer · 2015-11-12 17:41:00Z

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
}

answered Nov 12, 2015 at 17:41

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rak11 Over a year ago

How would I call function saveData() from in this code block?

Sparky Over a year ago

@rak11, have you tried saveData()? The same as you would call it with any JavaScript code.

rak11 Over a year ago

You are correct. Thank you for pointing out the obvious to me.

tdc · Accepted Answer · 2015-11-12 16:46:54Z

0

var rptActivityLogValidation = function() {
    var form = $('#form_rptActivityLog')[0];

    form.validate({ 
        // .... VALIDATE FIELDS HERE ..... //

        submitHandler: function (form) {
            form.submit(); // submit the form
        }
     });
}

You could try this -- make the form var the specific form [0]. Since you pass that into the submitHandler you don't need [0] inside it. This will make sure you're actually tageting the form.

Although we need to see how you call submitHandler. Are you actually passing the form into it?

edited Nov 12, 2015 at 16:46

answered Nov 12, 2015 at 16:39

tdc

5,50412 gold badges59 silver badges109 bronze badges

1 Comment

Sparky Over a year ago

He is not calling the submitHandler. The submitHandler is an option of the plugin's .validate() method. It's a callback that is fired when the form is valid and the submit button is clicked.

Collectives™ on Stack Overflow

Run JS Function After JQuery-Validation

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related