0

I am using Bootstrapvalidation to check my input fields. On top of that, I have additional check that is done on submit. It's either submitted without showing errors or, when I use this:

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

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

But then it's just all recursive and the form doesn't get submitted. How to I get this to work?

4

2 回答 2

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>

于 2016-03-29T13:17:43.053 回答
1

@Harshil 的回答涵盖了bootstrapValidation插件，它与1000hz BootstrapValidator插件完全不同

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

您需要有条件地处理提交事件以检查和处理additional custom check其他表单输入字段以进行验证，如果一切正常，请提交表单，

$('#form').validator().on('submit', function (e) {
  if (e.isDefaultPrevented()) {
    // handle the invalid form...
  } else {
    // everything looks good!
  }
})
于 2016-03-29T20:39:25.823 回答