Use with the Raty plugin. At first, try to click the Validate button to validate the form. Then click the Rating, fill in other fields, and click the Validate button again to see that the Rating is validated.
<!-- Include Raty JS file -->
<script src="/vendor/raty/jquery.raty.min.js"></script>
<form id="ratyForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Rating</label>
<div class="col-lg-5">
<div id="ratyRating"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Review title</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Your review</label>
<div class="col-lg-5">
<textarea rows="5" class="form-control" name="content"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-5 col-lg-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>$(document).ready(function() {
$('#ratyRating').raty({
path: '/vendor/raty/img',
size: 24,
// The name of hidden field generated by Raty
scoreName: 'star',
// Revalidate the star rating whenever user change it
click: function (score, evt) {
$('#ratyForm').bootstrapValidator('revalidateField', 'star');
}
});
$('#ratyForm')
.bootstrapValidator({
// The disabled elements are excluded
// Hidden elements (including the rating star) are included
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
star: {
validators: {
notEmpty: {
message: 'The rating is required'
}
}
},
title: {
validators: {
notEmpty: {
message: 'The review title is required'
}
}
},
content: {
validators: {
notEmpty: {
message: 'The review content is required'
},
stringLength: {
max: 200,
message: 'The review content must be less than 200 characters'
}
}
}
}
});
});