我尝试使用基本引导程序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>
这些是包含的文件。
答案 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
之前的第一个