success and errorplacement

http://stackoverflow.com/q/27244572/312208

by ryleyb

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form id="submit_form">
    <div>Username:
        <input type="text" name="username" />
    </div>
    <div>Password:
        <input type="password" name="password" />
    </div>
    <input type="submit"/>
</form>

CSS

.has-error {
    color:red;
}
.has-success {
    color:green;
}

JavaScript

$('form').validate({
    rules: {
        username: {
            required: true
        },
        password: {
            required: true
        },
    },
    submitHandler: function () {
        alert('successful submit');
        return false;
    },
  errorPlacement: function(error, element) {
    element.closest("div").removeClass('has-success').addClass('has-error');
  },
  success: function(error, element) {
    $(element).closest("div").addClass('has-success').removeClass('has-error');
  }    
});