Question

我将以下代码保存在名为index.html的文件中。此代码已从我在网上找到的示例中复制过来：

由于某种原因，我所拥有的两个输入以及复选框都未经过验证。我的意思是，如果输入的电子邮件地址无效，则应该给出错误，但事实并非如此。如果用户名为null并且未选中复选框，则还应该给出错误。我研究过bootstrap有的formValidation（）方法，但是找不到解决方法。关于这个问题的任何信息表示赞赏，谢谢！

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form id="basicBootstrapForm" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Email Address</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="email"
                data-fv-notempty="true"
                data-fv-notempty-message="The email address is required"

                data-fv-emailaddress="true"
                data-fv-emailaddress-message="The input is not a valid email address" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">username</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="username"
                data-fv-notempty="true"
                data-fv-notempty-message="The username is required" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-6 col-xs-offset-3">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="agree" value="agree"
                        data-fv-notempty="true"
                        data-fv-notempty-message="You must agree with the terms and conditions" /> Agree with the terms and conditions
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
        </div>
    </div>
</form>

<script>

$(document).ready(function() {
    $('#basicBootstrapForm').formValidation();
});
</script>
</body> 
</html>

Answer 1

在头部包含以下脚本。

http://formvalidation.io/bundles/0a3b9034e109d88d72f83c9e6c9d13b7.js

Bootstrap表单验证不返回错误

1 个答案: