jQuery中防止表单提交两次的方法

遇到过表单提交两次的情况，做个记录；

解决场景：首先是表单验证，其次是防止多次提交表单；

jQuery中插件：validate_submitHandler_plugin，具体的可以使用关键字搜索；

使用方法：首先在前端定义form表单，然后jQuery来处理验证和提交：

                <form id="application-form" class="form-horizontal">
                    <div class="rds panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">源表信息</h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="source-cluster" class="col-sm-2 control-label"><span class="required-field">*</span> 源集群：</label>
                                <div class="col-sm-8 control-section">
                                    <input id="source-cluster" name="sourceCluster" class="form-control" value="${cluster.name}" readonly>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="source-schema" class="col-sm-2 control-label"><span class="required-field">*</span> 源数据库：</label>
                                <div class="col-sm-8 control-section">
                                    <select id="source-schema" name="sourceSchema" class="form-control"></select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rds panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">目标表信息</h3>
                        </div>
                        <div class="panel-body">
                            <div class="form-group">
                                <label for="target-cluster" class="col-sm-2 control-label"><span class="required-field">*</span> 目标集群：</label>
                                <div class="col-sm-8 control-section">
                                    <select id="target-cluster" name="targetCluster" class="form-control"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="target-schema" class="col-sm-2 control-label"><span class="required-field">*</span> 目标数据库：</label>
                                <div class="col-sm-8 control-section">
                                    <input type="text" id="target-schema" name="targetSchema" class="form-control"  placeholder="database number">
                                </div>
                            </div>
                        </div>
                    </div>
                    <button id="btn-submit" type="submit" class="btn btn-primary" disabled>提交</button>
                </form>

    $("#application-form").validate({
        rules: {
            sourceCluster: "required",
            sourceSchema: "required",
            targetCluster: "required",
            targetSchema: "required",
        },
        submitHandler: function() {
            const sourceCluster = $("#cluster-name").val();
            const sourceDatabase = $("#source-schema").selectpicker("val");
            const targetCluster = $("#target-cluster").selectpicker("val");
            const targetDatabase = $("#target-schema").val();

            handleSubmit({sourceCluster, sourceDatabase, targetCluster, targetDatabase});
        }
    });

其中会遇到的问题，可以参考我在Stack Overflow上的回答：

https://stackoverflow.com/questions/23693658/jquery-validate-submits-form-twice