Bootstrap 3 + Validation Plugin

by André Albson

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<form>
    <div class="form-group">
        <label class="control-label" for="resposta">1 - Pergunta 1:</label>
       <div id="respostas">
			<input class="form-control" type="radio" name="resposta" value="id[1]" /> Male
			<input class="form-control" type="radio" name="resposta" value="id[2]" /> Female
			<input class="form-control" type="radio" name="resposta" value="id[3]" /> Other
		</div>
        </div>
    </div>
    
        <button type="submit" class="btn btn-primary">Submit</button>
</form>

CSS

body {
    padding: 20px;
}

JavaScript

$('form').validate({
        rules: {
            resposta: {
                minlength: 3,
                maxlength: 15,
                required: true
            },
            lastname: {
                minlength: 3,
                maxlength: 15,
                required: true
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });