required attribute

by lvo811

HTML

<script src="http://lancevo.github.io/smartform/js/smartform.js"></script>
<form>
    <section>
        <label>Text</label>
        <input required name="message">
        <div class="sfm">
            <div class="required">This field is required</div>
        </div>
    </section>
    <section>
        <label>Single Select</label>
        <select required>
            <option value="">Select something</option>
            <option value="1">Option 1</option>
            <option value="1">Option 2</option>
        </select>
        <div class="sfm">
            <div class="required">This field is required</div>
        </div>
    </section>
    <section>
        <label>Multiple Select</label>
        <select required multiple>
            <option value="">Select something</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
        <div class="sfm">
            <div class="required">This field is required</div>
        </div>
    </section>
    <section>
        <label>Textarea</label>
        <textarea required></textarea>
        <div class="sfm">
            <div class="required">This field is required</div>
        </div>
    </section>
    <section>
        <label>Single Checkbox:</label>
        <input required type="checkbox" name="cb" value="1">
        <div class="sfm">
            <div class="required">This field is required</div>
        </div>
    </section>
    <section>
        <label>Multiple Checkboxes:</label> <em>value of name attribute must have [].</em>

        <br> <em>ie: &lt;input name="choices[]" &gt;</em> 
        <br>
        <br>1:
        <input required type="checkbox" name="mcb[]" value="1">
        <br>2:
        <input required type="checkbox" name="mcb[]" value="2">
        <br>3:
        <input required type="checkbox" name="mcb[]" value="2">
        <br>
       ...

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