Question

一切正常，但处理人员不会解雇..

如果我挂钩点击提交按钮并在那里拨打.valid()，则可以正常工作。

我的表格：

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Provide pickslip number and locations</h4>
    </div>
    <div class="modal-body">
        <form id="addForm" role="form" class="form-horizontal">
            <div class="form-group">
                <label for="txtPickSlip" class="control-label col-sm-4">Pickslip:</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="txtPickSlip" name="txtPickSlip">
                </div>

            </div>
            <div class="form-group">
                <label for="txtLocations" class="control-label col-sm-4">Locations:</label>
                <div class="col-sm-8">
                    <textarea class="form-control" id="txtLocations" name="txtLocations"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClosePickSlip">Close</button>
        <button type="submit" class="btn btn-primary" id="btnSavePickSlip">Save changes</button>
    </div>
</div>
</div>

我的JS：

$(document).ready(function () {
var validator = $('#addForm').validate({
    invalidHandler:
        function (e, v) {
            alert('errors');
        },
    errorClass: 'has-error',
    validClass: 'has-success',
    rules: {
        txtPickSlip: {
            digits: true,
            required: true,
            minlength: 5,
            maxlength: 10
        },
        txtLocations: {
            required: true,
            minlength: 3
        }
    },
    highlight: function (element, errorClass, validClass) {
        $(element)
            .closest('.form-group')
            .removeClass('has-success has-feedback')
            .addClass('has-error has-feedback');
        $(element)
            .closest('.form-group')
            .find('span.glyphicon')
            .remove();
        $(element)
            .closest('.form-group')
            .append('<span class="glyphicon glyphicon-remove form-control-feedback"></span>');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element)
            .closest('.form-group')
            .removeClass('has-error has-feedback')
            .addClass('has-success has-feedback');
        $(element)
            .closest('.form-group')
            .find('span.glyphicon')
            .remove();
        $(element)
            .closest('.form-group')
            .append('<span class="glyphicon glyphicon-ok form-control-feedback"></span>');
    }
});

Answer 1

自己发现了这个错误。

问题是我必须移动button元素中的form元素。

Jquery验证处理程序不在bootstrap模式中触发

1 个答案: