jQuery-validate Example

by maleol

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<form id="form" method="post" action="#">
    <label for="cpf">CPF</label>
    <input type="text" name="cpf" id="cpf" />
    <button type="submit">Submit</button>
</form>

CSS

body {
    padding: 20px;
}

label {
    display: block;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}

JavaScript

$(document).onblur(function () {
    $("#form").validate({
        rules: {
            "cpf": {
                required: true
            }
        },
        messages: {
            "cpf": {
                required: "CPF é campo obrigatório"
            }
        },
    });

});