jQuery 验证 submitHandler 未触发

Question

我已经查看了之前的一些问题，我想我已经验证了 'basic' 事情（正确类型的提交按钮，在表单中，等等），但我仍然无法让 submitHandler 触发.

表单正在按要求进行验证，但在提交时未触发 submitHandler

内的 ajax 调用

表单元素：

<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>
    $(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>

作为参考，'versions' 和 'status' 元素是页面另一部分的 div，在 ajax 提交时更新内容。

Answer 1

在你的html中定义为输入，所以按钮#xxx不对

改变你的

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

以下作品

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

Answer 2

你的问题在这里...

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

.validate() 方法仅用于初始化 表单上的插件。它不属于提交按钮的 click 处理程序。正确初始化后，插件本身自动捕获 click、阻止提交、验证表单并触发 submitHandler。

您实际上只是在第一次点击时初始化插件；您需要再次单击以触发验证和 submitHandler.

只需删除 click 处理程序...

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

你的 jsFiddle 没有 click 处理程序：jsfiddle.net/5bbnczba/10/

这是一个有争议的问题，因为不需要您的 click 处理程序，但是您的 jQuery 选择器 $('button#ajaxsubmit') 是完全错误的。您使用 id="ajaxsubmit" 定位 button 元素，但是，您提交的是 <input>，而不是 <button>。

jQuery 验证 submitHandler 未触发

jQuery validate submitHandler not firing

jquery

jquery-validate

bootstrap-modal