1000hz bootstrap验证器

时间:2015-11-17 17:22:31

标签: twitter-bootstrap validation

我尝试使用基本引导程序HTML 5的表格的1000hz验证器,我没有使用任何自定义查询,我不知道。我使用的文本字段接受10位数的电话号码。我修改了我的代码,如1000hz github bootstrap验证器的示例中所提供的。但是,当我开始键入几个数字时,它会在框的末尾显示一个刻度标记,当我切换到下一个元素时,它不会显示符号,因为HTML 5的验证。我想只显示刻度标记用户输入10位数。如果还原并删除几个数字,它应该显示x标记,直到他输入10位数。请帮助谢谢。

<div class="form-group textareawidth has-feedback">
    <label for="mobile">Principal's Mobile number </label>
    <input type ="text"  minlength = "10" maxlength="10" class="form-control" placeholder="Enter mobile number" name = "hmmobile" id="mobile" data-error="Phone number is invalid" required>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    <span class="help-block with-errors">Please enter 10 digit number</span>
</div>

另一个用户指出我使用1000hz足以包含validator.js。但它不起作用我需要包含更多的文件。然后该站点提供的示例工作。我是正确的,因为我是新手。

<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{ site.cdn_bootstrap_js }}"></script>
<script src="dist/validator.min.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/application.js"></script>

这些是包含的文件。

1 个答案:

答案 0 :(得分:0)

您必须使用数据属性data-minlength来检查并验证输入Check Reference Here中的字符长度

minlength = "10"替换为data-minlength = "10"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.9.0/validator.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<form data-toggle="validator" role="form">
    <div class="form-group textareawidth has-feedback">
        <label for="mobile">Principal's Mobile number</label>
        <input type="text" pattern="^[0-9]{1,}$" data-minlength="10" maxlength="10" class="form-control" placeholder="Enter mobile number" name="hmmobile" id="mobile" data-error="Phone number is invalid" required> <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
 <span class="help-block with-errors">Please enter 10 digit number</span>
    </div>
</form>

SideNote:您1000hz-bootstrap-validator/0.9.0/validator.min.js高于jquery-1.10.2.min.js,然后又<script src="dist/validator.min.js"></script>

不能有validator.min.js个lib两次,所以删除jquery-1.10.2.min.js之前的第一个