这是我的 HTML 和 JavaScript 代码
<script src = "../js/jquery.min.js"></script>
<script src="../js / formvalidation / bootstrapValidator.min.js"></script>
<script type="text / javascript">
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
}
});
});
</script><form id="staff_add" class="form-horizontal" action="#" method="post" autocomplete="off">
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option>--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
</select>
<input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required="" />
<button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button>
</form>选择框验证不起作用，文本框验证正常工作。
我删除了选择框类 selectpicker 验证工作，但放置 selectpicker 类则不起作用
您需要添加一个submitHandler
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
}
submitHandler: function (validator, form, submitButton) {
return false;
}
});
});
您还需要为选项元素分配值属性
将第一个选项值设置为空，否则它的值为--Select--，因此条件失败。
<option value="">--Select--</option>
已修改
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- form: -->
<section>
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h2>Sign up</h2>
</div>
<form id="staff_add" method="post" class="form-horizontal" action="target.php">
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option>--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
</select>
<br><br>
<input type="text" class="form-control" name="invoicenumber" id="invoiceNo" placeholder="Invoice No" required=""/>
<br><br>
<button type="submit" name="add_purchase" id="submit_postcode" class="btn btn-success">Submit</button>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
<script>
$(document).ready(function() {
$('#staff_add').bootstrapValidator({
message: 'This value is not valid',
fields: {
vender: {
validators: {
notEmpty: {
message: 'The Field is required'
}
}
},
invoicenumber: {
validators: {
notEmpty: {
message: 'The Fieldsd is required'
}
}
},
}
});
});
</script>
</body>
</html>
要将选项设置为“作为验证答案无效”，您应该禁用它：
<select class="selectpicker form-control" data-live-search="true" name="vender" tabindex="-1" required="required">
<option disabled="disabled">--Select--</option>
<option>001</option>
<option>002</option>
<option>003</option>
#### Apply value="" it works.###
<label>Role</label>
<select class="form-control" id="roleId" required>
<option value="">-Select-</option>
<option value="1">Doctor</option>
</select>