表单验证引导程序不适用于带有ajax的模态表单

时间:2015-05-07 13:39:42

标签: jquery ajax twitter-bootstrap

我正在尝试验证我用ajax发布的模态表单。这是我正在使用的代码。问题是它不会在控制台中显示任何错误。

$('#addRecordForm')
    .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            truckNumber: {
                validators: {
                    notEmpty: {
                        message: 'The truckNumber is required'
                    }
                }
            },
            provider: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    })
    .on('success.form.fv', function (e) {
        // Prevent form submission
        e.preventDefault();

        var $form = $(e.target),
            fv = $form.data('formValidation');

        // Use Ajax to submit form data
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "/tallys/check-record",
            data: {
                rowCount: rowCount,
                truckNumber: $("#truckNumber").val(),
                provider: $("#provider").val(),
                netAmount: $("#netAmount").val(),
                moisture: $("#moisture").val(),
                impurities: $("#impurities").val(),
                broken: $("#broken").val(),
                damaged: $("#damaged").val()
            },
            success: function (result) {
                if (result.success == 1) {
                    $('#myModal').modal('hide');
                } else if (result.success == 0) {}
            }
        });
    });

当我点击ID为add_record的按钮时,此代码会运行。我没有粘贴它,但它在那里,它的工作原理。你看到代码有问题吗?

更新:我发现了问题所在。按钮应放在表单部分,在我的情况下,它不是。任何想法如何解决这一问题?

1 个答案:

答案 0 :(得分:0)

我认为您想使用表单外的按钮提交表单。要执行此操作,您需要指定您提交的表单,因为该按钮不在表单中。

<form id="the form">...your code in here..</form>
<input type="submit" form="theform" />

由于这在IE中不起作用:D你可以使用JQuery来做到这一点

<form id="the form">...your code in here..</form>
<button type="button" id="theSubmit">Submit</button>

<script type="text/javascript">
    $(document).ready(function() {
       $("#theSubmit").click(function() {
           $("#theForm").submit();
       });
    });
</script>