match input

by lvo811

HTML

<script src="http://lancevo.github.io/smartform/js/smartform.js"></script>
<form>
    <section>
        <label>Input A:</label>
        <input id="a" type="text" required name="something">
        <div class="sfm">
            <div class="required">This field is required</div>
        </div>
    </section>
    <section>
        <label>Verify Input A:</label>
        <input type="text" name="confirmA" data-smartform-match="#a" required/>
        <div class="sfm">
            <div class="focus">Please re-enter the text above</div>
            <div class="required">This field is required</div>
            <div class="not-matched">Entered text doesn't match</div>
            <div class="matched">Entered text matched</div>
        </div>
    </section>
    <section>
        <p>the value of data-smartform-match can be an id, classname, or name of the matching input field</p>
    </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();
});