javascript - jqBootstrap 验证表单错误

Question

我正在尝试验证表单，但问题是代码未按要求验证表单，下面是代码

<script>
$(function() {
    $("input,textarea,select").jqBootstrapValidation(
        {
            preventSubmit: true,
            submitError: function($form, event, errors) {
                // Here I do nothing, but you could do something like display 
                // the error messages to the user, log, etc.
            },
            submitSuccess: function($form, event) {
                alert("OK");
                event.preventDefault();
            },
            filter: function() {
                return $(this).is(":visible");
            }
        }
   );
});
</script>

在所有情况下，无论表单为空还是已填，它都会成功。

我查了很多资料，还是没找到问题所在。

Answer 1

首先您必须包含所有必需的 css 和 js 文件

http://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js
http://reactiveraven.github.io/jqBootstrapValidation/css/bootstrap.css
http://reactiveraven.github.io/jqBootstrapValidation/js/jQuery-1.7.2-min.js

html:

<form class="form-horizontal" novalidate>
    <div class="control-group">
        <label class="control-label" for="email">Email address</label>
        <div class="controls">
            <input type="email" name="email" id="email" required>
            <p class="help-block">Email address we can contact you on</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="emailAgain">Email again</label>
        <div class="controls">
            <input type="email" data-validation-matches-match="email" data-validation-matches-message="Must match email address entered above" id="emailAgain" name="emailAgain">
            <p class="help-block">And again, to check for speeling miskates</p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="terms-and-conditions">Legal</label>
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" required data-validation-required-message="You must agree to the terms and conditions">I agree to the <a href="#">terms and conditions</a>

            </label>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Quality Control</label>
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox" name="qualityControl[]" value="fast" data-validation-minchecked-minchecked="2" data-validation-minchecked-message="Choose two" data-validation-maxchecked-maxchecked="2" data-validation-maxchecked-message="You can't have it all ways">Fast</label>
            <label class="checkbox">
                <input type="checkbox" name="qualityControl[]" value="cheap">Cheap</label>
            <label class="checkbox">
                <input type="checkbox" name="qualityControl[]" value="good">Good</label>
            <p class="help-block"></p>
        </div>
    </div>
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Test Validation <i class="icon-ok icon-white"></i>
        </button>
        <br />(go ahead, nothing is sent anywhere)</div>
</form>

脚本

<script>
        $(function() {
            $("input,textarea,select").jqBootstrapValidation(
                {
                    preventSubmit: true,
                    submitError: function($form, event, errors) {
                        // Here I do nothing, but you could do something like display 
                        // the error messages to the user, log, etc.
                    },
                    submitSuccess: function($form, event) {
                        alert("OK");
                        event.preventDefault();
                    },
                    filter: function() {
                        return $(this).is(":visible");
                    }
                }
            );
        });
 </script>

jsfiddle 演示

http://jsfiddle.net/suhailvs0/Dp3qZ/1/