Playing with Raty

<!-- 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-sm-3 control-label">Rating</label>
        <div class="col-sm-5">
            <div id="ratyRating"></div>
        </div>
    </div>

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

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

    <div class="form-group">
        <div class="col-sm-5 col-sm-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'
                    }
                }
            }
        }
    });
});