validate with errorLabelContainer

http://stackoverflow.com/questions/17306067/simple-jquery-validation-custom-position-error-message-placement

by ryleyb

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form method="POST" class="form-horizontal contact-form" id="contact-form">
    <!--<?php $formKey->outputKey(); ?> -->
    <fieldset>
        <div class="control-group">
            <label class="control-label" for="inputPhone">Phone</label>
            <div class="controls">
                <input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country &amp; area code">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <button type="submit" value="Send" class="btn" id="btn-place">Send!</button>
            </div>
            <div id="errors"></div>
        </div>
    </fieldset>
</form>

CSS

.error {
    color: red;
}

JavaScript

$('#contact-form').validate({
    rules: {
        phone: {
            minlength: 11,
            required: false,
            number: true
        },
    },
    highlight: function (label) {
        $(label).closest('.control-group').addClass('error');
    },
    success: function (label) {
        label.text('OK!').addClass('valid')
            .closest('.control-group').addClass('success');
    },
    errorLabelContainer: '#errors',
    wrapper:'li',
    submitHandler: function () {
        alert("successful submit");
        return false;
    }
});