patterns

by lvo811

HTML

<script src="http://lancevo.github.io/smartform/js/smartform.js"></script>
<form>
    <section>
        <label>Single Pattern</label>
        Enter letters only, no space or any special characters
        <br>
        <input type="text" name="something" pattern="^[A-z]$">
        <div class="sfm">
            <div class="pattern-valid">Valid characters</div>
            <div class="pattern-invalid">INVALID characters</div>
        </div>
        <p> <em>.pattern-invalid</em> message only appears if the test of the pattern is invalid and the input field is blurred. <br>However, <em>.pattern-valid</em> is appeared as soon the test is valid.</p>
    </section>
            
    <section>
        <label>Multiple Patterns</label> 
        <input type="text" name="something" 
            data-pattern-uppercase="[A-Z]"
            data-pattern-lowercase="[a-z]"
            data-pattern-digits="[\d]">
        
        <div>
            <div class="pattern-uppercase"> Uppercase </div>
            <div class="pattern-lowercase"> Lowercase </div>
            <div class="pattern-digits"> Numbers </div>
        </div>
                
                <p> smartform will read the name of data-pattern-[name], and will apply .pattern-[name]-valid or .pattern-[name]-invalid to the wrapper of the input field depends on the outcome of the test. </p> 
                </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;
}


.pattern-uppercase:before,
.pattern-lowercase:before,
.pattern-digits:before {
    content:'☐︎';
}
.pattern-uppercase-valid .pattern-uppercase:before,
.pattern-lowercase-valid .pattern-lowercase:before,
.pattern-digits-valid .pattern-digits:before
{
    content:'✔︎';
}

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();
});