.focus & .visited

by lvo811

HTML

<script src="http://lancevo.github.io/smartform/js/smartform.js"></script>
<form>
    <section>
        <label>Type in a message:</label>
        <input type="text" name="something">
        <div class="sfm">
            <div class="focus">focus message</div>
            <div class="visited">visited message</div>
        </div>
    </section>
</form>

CSS

.sfm > * {
    display: none;
}
.focus .focus, .visited .visited, .required .required, .checked .checked, .not-checked .not-checked, .matched .matched, .not-matched .not-matched, .pattern-valid .pattern-valid, .pattern-invalid .pattern-invalid, .submit-invalid .submit-invalid {
    display:block;
}
.sfm .pattern-invalid, .sfm .required, .sfm .not-matched {
    color:red;
}


section {
    margin-bottom: 20px;
    padding: 20px;
    width: 400px;
}
section:nth-child(odd) {
    background: #efefef;
}
label {
    display:block;
    font-weight:bold;
}

JavaScript

$().ready(function () {
    $("form").smartform();
});