Playing with Raty

<!-- Include Raty JS file -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/jquery.raty.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/jquery.raty.min.js"></script>

<form id="ratyForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Rating</label>
        <div class="col-xs-5">
            <div id="ratyRating"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Review title</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="title" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Your review</label>
        <div class="col-xs-6">
            <textarea rows="5" class="form-control" name="content"></textarea>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#ratyRating').raty({
        // You might need to adjust the path to star images
        // if you store the Raty library on your server
        path: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.7.0/images',
        // The name of hidden field generated by Raty
        scoreName: 'star',
        // Revalidate the star rating whenever user change it
        click: function(score, evt) {
            // Update the score
            $('#ratyRating').raty('score', score);
            $('#ratyForm').formValidation('revalidateField', 'star');
            return false;
        }
    });

    $('#ratyForm').formValidation({
        framework: 'bootstrap',
        // The disabled elements are excluded
        // Hidden elements (including the rating star) are included
        excluded: ':disabled',
        icon: {
            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'
                    }
                }
            }
        }
    });
});
</script>