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

时间:2022-10-13 15:14:20

I am trying to validate a modal form which I post with ajax. This is the code i am using. The problem is that it dont show any errors in console.

我正在尝试验证我用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) {}
            }
        });
    });

This code runs when i click button with id add_record. I didnt paste it but its there and it works. Do you see something wrong with the code ?

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

UPDATE: I found where the problem is. The button should be placed in the form section and in my case it wasnt. Any ideas how to fix this?

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

1 个解决方案

#1


I think you want to submit your form using a button outside the form. to do this you will need to specify the form you are submitting since the button is out of the form.

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

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

Since this doesn't work in IE :D you can use JQuery to do so

由于这在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>

#1


I think you want to submit your form using a button outside the form. to do this you will need to specify the form you are submitting since the button is out of the form.

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

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

Since this doesn't work in IE :D you can use JQuery to do so

由于这在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>