Bootstrap 表单验证并使用 bootstrap 验证器提交

Question

我在我的网站上使用 bootstrap 弹出模式表单作为联系人 form.I 使用 bootstrap 表单进行表单验证 validation.Now 我想提交表单并显示成功或相同模态形式的错误消息。

我使用

进行了验证

<script src="js/bootstrapValidator.min.js" type="text/javascript"></script>
<script>
$('#contest-form').bootstrapValidator();
</script>

Answer 1

您需要使用 Ajax。 JavaScript如下（注：这里使用ID为result的元素显示结果）：

$('body').on('success.form.bv', '#form', function(event) {

    event.preventDefault();

    var formData = $(this).serialize();

    $.ajax({
        url: 'form-submission.php',
        type: 'post',
        data: formData,
        success: function(result) {
            $('#result').html(result);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            # error handling here
        }
    })

});

还有一个粗略的例子PHP：

// do whatever with the form - you have access to $_POST
$form_submitted = false // or true, depending on your PHP

if ($form_submitted) {

    echo '<div class="alert animated fadeIn alert-dismissable alert-success"><strong>Success!</strong> Indicates a successful or positive action.</div>';

} else {

    echo '<div class="alert animated fadeIn alert-dismissable alert-danger"><strong>Error!</strong> There was an error submitting the form.</div>';

}

Bootstrap 表单验证并使用 bootstrap 验证器提交

Bootstrap form validation and submit using bootstrap validator

php

ajax

jquery

bootstrap-modal