如何让jqBootstrapValidation表单工作?

时间:2013-10-30 13:31:10

标签: jquery twitter-bootstrap client-side

我尝试按照jqBootstrapValidation网站上的说明操作,但无法获得一个简单的示例。我选择了电子邮件验证。不确定会出现什么问题,但我怀疑它可能是安装说明的第2步,我将其包含在下面示例的底部。

<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Email address</label>
<div class="controls">
<input type="email" />
<p class="help-block"></p>
</div>
</div>
</form>

<!--Scripts-->
<script>
   $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- or use local jquery -->     
<script src="./js/bootstrap.js"></script>

2 个答案:

答案 0 :(得分:2)

您不包括jqBootstrapValidation.js ..

download并将此行包含在底部:

<script src="./js/jqBootstrapValidation.js"></script>

之前或之后:

<script src="./js/bootstrap.js"></script>

但不高于你调用jQuery的地方:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

另外,它不起作用,因为jqBootstrapValidation需要jQuery才能工作

答案 1 :(得分:1)

我认为这个简单的例子可以帮助你......

             

</head>
<body>
    <!------------------------------------------------------------------------------->
    <form class="form-horizontal">
        <div class="control-group">
            <label class="control-label">Email address</label>
            <div class="controls">
                <input type="email" />
                <p class="help-block"></p>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Type something</label>
            <div class="controls">
                <input type="text" name="some_field" required />
                <p class="help-block"></p>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">Type a number</label>
            <div class="controls">
                <input type="number" />
                <p class="help-block"></p>
            </div>
        </div>
        <input type="submit" value="enter1"/>
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- or use local jquery -->
    <script src="/js/jqBootstrapValidation.js"></script>
    <script>

        $(function() {
            $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
        });

    </script>
    <!-- Bootstrap Core JavaScript -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

</body>