Question

我在bootstrap 3中使用了一些模态的popover验证，但是使用ajax提交了表单，验证工作正常，但ajax是在验证旁边执行的吗？

这是我的代码，当有人点击提交时，验证弹出窗口但是ajax会继续吗？

HTML

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">Please edit customer data</h4> 
        </div>
        <div class="modal-body">
            <div class="alert alert-danger alert-error" style="display:none;"> <a href="#" class="close" data-dismiss="alert">×</a>  <strong>Error!</strong> A problem has been occurred while submitting your data.</div>
            <div class="alert alert-dismissable alert-success" style="display:none;">
                <button type="button" class="close" data-dismiss="alert">×</button> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.</div>
            <form class="form-horizontal" data-async="" action="http://plasticnestolice.com/customers/edit.html" method="POST">
                <fieldset>
                    <div class="form-group">
                        <label for="inputEmail" class="col-lg-3 control-label">Name</label>
                        <div class="col-lg-9">
                            <input name="username" data-placement="left" data-trigger="manual" data-content="Must be at least 3 characters long" class="form-control required" placeholder="Email" autofocus="" type="text">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" id="submit" class="btn btn-success"><i class="fa fa-pencil fa-lg"></i> Save changes</button>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

JS

jQuery(function($) {
        $('form[data-async]').on('submit', function(event) {
            var $form = $(this);
            var $target = $($form.attr('data-target'));
            $.ajax({
                type: $form.attr('method'),
                url: $form.attr('action'),
                data: $form.serialize(),
                success: function(data, status) {
                    $(".alert-success").toggle();
                    location.reload(true);
                },
                error: function() {
                    $(".alert-error").toggle();
                }
            });
            event.preventDefault();
        });
    });
    $(document).ready(function() {
        $.fn.goValidate = function() {
            var $form = this,
                $inputs = $form.find('input:text, input:password'),
                $selects = $form.find('select'),
                $textAreas = $form.find('textarea');
            var validators = {
                name: {
                    regex: /^[A-Za-z]{3,}$/
                },
                username: {
                    regex: /^[A-Za-z]{6,}$/
                },
                firstName: {
                    regex: /^[A-Za-z]{3,}$/
                },
                lastName: {
                    regex: /^[A-Za-z]{3,}$/
                },
                town: {
                    regex: /^[A-Za-z]{3,}$/
                },
                postcode: {
                    regex: /^.{3,}$/
                },
                password1: {
                    regex: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/
                },
                password1_repeat: {
                    regex: /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/
                },
                email: {
                    regex: /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/
                },
                phone: {
                    regex: /^[2-9]\d{2}-\d{3}-\d{4}$/,
                },
                body: {
                    regex: /^.{3,}$/
                },
                country: {
                    regex: /^(?=\s*\S).*$/,
                }
            };
            var validate = function(klass, value) {
                var isValid = true,
                    error = '';
                if (!value && /required/.test(klass)) {
                    error = 'This field is required';
                    isValid = false;
                } else {
                    klass = klass.split(/\s/);
                    $.each(klass, function(i, k) {
                        if (validators[k]) {
                            if (value && !validators[k].regex.test(value)) {
                                isValid = false;
                                error = validators[k].error;
                            }
                        }
                    });
                }
                return {
                    isValid: isValid,
                    error: error
                }
            };
            var showError = function($e) {
                var klass = $e.attr('class'),
                    value = $e.val(),
                    test = validate(klass, value);
                $e.removeClass('invalid');
                $('#form-error').addClass('hide');
                if (!test.isValid) {
                    $e.addClass('invalid');
                    if (typeof $e.data("shown") == "undefined" || $e.data("shown") == false) {
                        $e.popover('show');
                    }
                } else {
                    $e.popover('hide');
                }
            };
            $inputs.keyup(function() {
                showError($(this));
            });
            $selects.change(function() {
                showError($(this));
            });
            $textAreas.keyup(function() {
                showError($(this));
            });
            $inputs.on('shown.bs.popover', function() {
                $(this).data("shown", true);
            });
            $inputs.on('hidden.bs.popover', function() {
                $(this).data("shown", false);
            });
            $form.submit(function(e) {
                $inputs.each(function() { /* test each input */
                    if ($(this).is('.required') || $(this).hasClass('invalid')) {
                        showError($(this));
                    }
                });
                $selects.each(function() { /* test each input */
                    if ($(this).is('.required') || $(this).hasClass('invalid')) {
                        showError($(this));
                    }
                });
                $textAreas.each(function() { /* test each input */
                    if ($(this).is('.required') || $(this).hasClass('invalid')) {
                        showError($(this));
                    }
                });
                if ($form.find('input.invalid').length) { /* form is not valid */
                    e.preventDefault();
                    $('#form-error').toggleClass('hide');
                }
            });
            return this;
        };
        $('form').goValidate();
    });

这是工作bootply，我不知道为什么验证不会停止ajax调用？

http://www.bootply.com/J5QItCF3Ue

Answer 1

请注意，jQuery(function($) {}的功能等于$(document).ready(function()。

在提交表单时，您会触发$('form[data-async]').on('submit', function(event) {}和$form.submit(function(e) {}操作。

将jQuery(function($) { $('form[data-async]').on('submit', function(event) { });重写为全局函数： var formsubmit = function（）{};`

而不是$('form[data-async]').on('submit', function(event) {}代码：

if ($form.find('input.invalid').length) { /* form is not valid */
                    e.preventDefault();
                    $('#form-error').toggleClass('hide');
                }
else {
formsubmit();
e.preventDefault();
}

验证在bootstrap 3模式中不起作用？

1 个答案: