SO - 30297980

by Arun P Johny

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<form id="formPost_connection" autocomplete="on" method="POST" name="" action="">
    <fieldset>
        <div class="form-group">
            <label for="account_login">Email address / User name:</label>
            <div class="input-wrapper">
                <input id="account_login" type="text" name="mail" title="Enter your email address or user name" required />
            </div>
        </div>
        <div class="password-field-wrapper">
            <div class="form-group" style="margin-bottom: 0;">
                <label for="mdp">Password:</label>
                <div class="input-wrapper">
                    <input id="mdp" type="password" name="mdp" title="Enter your password" required />
                </div>
            </div> <a title="Did you forget your password?" class="forgot-password" href="/reset-password">Forgot your password?</a>

        </div>
        <button class="btn" type="submit">Log In</button>
    </fieldset>
</form>

JavaScript

$(document).ready(function () {
    $("#formPost_connection").validate({
        rules: {
            mail: {
                required: true
            }
        },
        messages: {
            mail: {
                required: "Please enter your email address or username"
            }
        },
        errorElement: 'div',
        errorPlacement: function (error, element) {
            var parent = $(element).closest('.form-group');
            error.insertAfter(parent);
        },
        highlight: function (element, errorClass) {
            var parent = $(element).closest('.form-group');
            $(parent).addClass('field-error');
        },
        unhighlight: function (element, errorClass) {
            var parent = $(element).closest('.form-group');
            $(parent).removeClass('field-error');
        }
    });
});