我试图使用Bootstrap Validator来验证一个表单,该表单分为两个" col-md"类
第一个保存在.col-md-8中,第二个保存在.col-md-3中。
验证正在处理.col-md-8中的那个,但.col-md-3中没有任何内容正在验证。
我知道Bootstrap验证器的语法是正确的,因为它是早期工作的副本。
有没有人有这方面的经验?
<div class="form-group">
<label for="number">House Number</label>
<input class= "form-control" style="width:30%;" type="text" name="number" placeholder="e.g. 2a">
</div>
验证者javascript:
$('#multiform')
.find('[name="list_type"]')
.change(function(e) {
$('#multiform').bootstrapValidator('revalidateField', 'price');
})
.end()
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
required: 'fa fa-asterisk',
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
price: {
validators: {
notEmpty: {
message: 'The price is required and cannot be empty'
},
integer: {
message: 'You can only enter an integer'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The price can only consist of numbers'
}
}
},
title: {
validators:{
notEmpty: {
message:'This field cannot be empty'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The title can only consist of letters and numbers'
}
}
},
desc: {
validators:{
notEmpty: {
message: 'This field cannot be empty'
},
stringLength: {
max: 500,
message: 'Your description is too long'
},
regexp: {
regexp: /^[a-zA-Z0-9#*]+$/,
message: 'The house number can only consist of letters and numbers'
}
}
},
number: {
validators:{
notEmpty: {
message: 'This field cannot be empty'
}
}
}
}
});
(使用上面的代码,它是不能验证的数字。
答案 0 :(得分:0)
一切似乎都是正确的,这是一个示例,如果您仍然遇到问题,请尽可能发布您的HTML。
请参阅代码段。
$('#multiform')
.find('[name="list_type"]')
.change(function(e) {
$('#multiform').bootstrapValidator('revalidateField', 'price');
})
.end()
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
required: 'fa fa-asterisk',
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
price: {
validators: {
notEmpty: {
message: 'The price is required and cannot be empty'
},
integer: {
message: 'You can only enter an integer'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The price can only consist of numbers'
}
}
},
title: {
validators: {
notEmpty: {
message: 'This field cannot be empty'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The title can only consist of letters and numbers'
}
}
},
desc: {
validators: {
notEmpty: {
message: 'This field cannot be empty'
},
stringLength: {
max: 500,
message: 'Your description is too long'
},
regexp: {
regexp: /^[a-zA-Z0-9#*]+$/,
message: 'The house number can only consist of letters and numbers'
}
}
},
number: {
validators: {
notEmpty: {
message: 'This field cannot be empty'
}
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form id="multiform" name="multiform" method="post">
<div class="form-group">
<label for="price">Price</label>
<input class="form-control" id="price" type="text" name="price" placeholder="e.g. 2a">
</div>
<div class="form-group">
<label for="number">House Number</label>
<input class="form-control" id="number" type="text" name="number" placeholder="e.g. 2a">
</div>
<input class="btn" type="submit" value="Send">
</form>
</div>