如何使用 Bootstrap 验证提交表单

Question

我正在使用 Bootstrapvalidation 检查我的输入字段。最重要的是，我还有在提交时完成的额外检查。它要么提交时没有显示错误，要么当我使用它时：

$("#form").submit(function(ev){
    ev.preventDefault();
});

$("#submit-form").on("click", function(){
    var valid=some code for additional check;
    if (valid) {
        $("#form").submit();
    }
    else {
        return;
    }
});

但是这一切都是递归的，表单没有被提交。我如何让它工作？

Answer 1

参考下面的例子

<script>
$(document).ready(function() {
    $('#taskForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                task: {
                    validators: {
                        notEmpty: {
                            message: 'The task is required'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {
                            message: 'The description is required'
                        }
                    }
                }
            }
        })
        .on('success.field.fv', function(e, data) {
            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                data.fv.disableSubmitButtons(true);
            }
        });
});
</script>

<form id="taskForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Task</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="task" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Description</label>
        <div class="col-xs-5">
            <textarea class="form-control" name="description" rows="5"></textarea>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <!-- Initially, the submit button is disabled -->
            <button type="submit" class="btn btn-default" disabled="disabled">Submit</button>
        </div>
    </div>
</form>

Answer 2

@Harshil 的回答涵盖了 bootstrapValidation plugin which is totally a different plugin then 1000hz BootstrapValidator 插件

在您的方法中，您在第一个脚本中有 ev.preventDefault();，这是单独的脚本并且阻止表单提交并不重要输入字段/附加检查有效或无效以及输入状态/附加检查根本没有在第一个脚本中定义有效或无效。

您需要 Conditionally handling the submit event 检查和处理 additional custom check 以及其他表单输入字段以进行验证，如果一切正常，请提交表单，

$('#form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    // everything looks good!
  }
})

如何使用 Bootstrap 验证提交表单

How to submit form using Bootstrap Validation

jquery

forms

bootstrapvalidator

参考下面的例子