Bootstrap 3 + Validation Plugin

by marhaba

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="row">
                <div>
                    <div><div><label for="fullname" class="col-sm-3 control-label">Name</label></div></div>    
                </div>
                <div class="col-sm-7">
                    <input type="text" id="memberName" name="MemberName" class="form-control" placeholder="Member Name" maxlength="55" required/>
                </div>
                <div class="col-sm-2">
                </div>
            </div>
            <!-- Region -->
            <div class="row">
                <div><label for="Region" class="col-sm-3 control-label">Region:</label></div>
                <div class="col-sm-5">
                     <input id="add-connection-regions" style="width: 250px;" class="form-control" required/>
                </div>
                <div class="col-sm-4">
                </div>
            </div>

                <br/>   
        <button type="submit" class="btn btn-primary">Submit</button>
</form>

CSS

body {
    padding: 40px;
}

JavaScript

$('form').validate({
        highlight: function(element) {
            $(element).closest('.row').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.row').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);
            }
        }
    });