jQuery validate submitHandler not firing

Question

I've looked through some previous questions and I think I've verified the 'basic' things (submit button of correct type, in the form, etc), but I still cannot get the submitHandler to fire.

The form is being validated as desired, but on submit, it is not trigging the ajax call inside the submitHandler

Form Element:

<div id="view-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">
                    Add New Version
                </h4>
            </div>

            <form method="post" class="form-horizontal validate_form" id="ajaxform" enctype="multipart/form-data">
                <div class="modal-body">

                    <div class="form-group">
                        <label class="col-sm-2 control-label">Version Number</label>
                        <div class="col-sm-10">
                            <select class="form-control required" name="version_number">
                                <option value="">Select A Version...</option>
                                '.writeSelectOptions('versions', 'id', 'version_number', 'launch_date', 'DESC', array(), $_GET['version_id']).'
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Sort Order</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control required" name="sort_order" id="sort_order">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Change Details</label>
                        <div class="col-sm-10">
                            <textarea class="ckeditor" name="editor">Help Text</textarea>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <input type="hidden" name="form_type" value="add_change" />
                    <input type="submit" class="btn btn-primary" id="ajaxsubmit" value="Submit" />&nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

Script:

<script>
    $(document).on('click', '#add_new_associated_change', function(e){
        e.preventDefault();
        $('#view-modal').modal('show');
    });

    $('button#ajaxsubmit').click(function(){
        $('#ajaxform').validate({
            ignore: 'hidden',
            submitHandler: function(form) {
                $.ajax({
                    type: 'POST',
                    url: 'scripts/submit_new_associated_change.php',
                    data: $('#ajaxform').serialize(),
                    success: function(msg){
                        $('#view-modal').modal('hide');
                        $('#versions').html(msg);
                        $('#status').html('<div class=\"alert alert-success alert-dismissable\"><button aria-hidden=\"true\" data-dismiss=\"alert\" class=\"close\" type=\"button\">&times;</button>Version added as requested.</div>');
                        //alert(msg);
                    },
                    error: function(xhr, textStatus, errorThrown){
                        console.log('failure'+xhr.responseText);
                    }
                });
            }
        });
        return false;
    });

    ClassicEditor
        .create( document.querySelector( ".ckeditor" ) )
        .then(
        editor => {
        console.log( editor );
    }
    )
    .catch(
        error => {
        console.error( error );
    }
    );
</script>

For reference, the 'versions' and 'status' elements, are divs on another portion of the page that are to have content updated upon ajax submission.

Answer 1

Your problem is here...

$('button#ajaxsubmit').click(function(){
    $('#ajaxform').validate({
        ....

The .validate() method is only used to initialize the plugin on your form. It does not belong inside of the click handler of the submit button. Once properly initialized, the plugin itself automatically captures the click, blocks the submit, validates the form, and fires the submitHandler.

You are effectively doing nothing more than initializing the plugin on the first click; you'd need to click a second time to fire the validation and submitHandler.

Just remove the click handler...

$('#ajaxform').validate({
    ....

Your jsFiddle without the click handler: jsfiddle.net/5bbnczba/10/

---

It's a moot point because your click handler is not needed, but your jQuery selector, $('button#ajaxsubmit'), was completely wrong. You were targeting a button element with id="ajaxsubmit", however, your submit is an <input>, not a <button>.

Answer 2

In your html, it is defined as input, so button#xxx is not right

change your

 $('button#ajaxsubmit').click(function(){

to the following works

 $('#ajaxsubmit').click(function(){
 $('input#ajaxsubmit').click(function(){
 $('input[id=ajaxsubmit]').click(function(){