Back to Snippets List

grouped - Grouped Inputs

Date of birth
For example, 31 03 1980

16

16
<form class="form-group">
    <fieldset>
        <legend>
            <span class="form-label-bold">
                Date of birth
            </span>
        </legend>

        <div class="form-date form-group form-date-group" data-grouped-inputs>

            <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Day" data-valmsg-replace="true"></span>
            <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Month" data-valmsg-replace="true"></span>
            <span class="field-validation-error" data-valmsg-for="Child.DateOfBirth.Year" data-valmsg-replace="true"></span>

            <span class="form-hint">For example, 31 03 1980</span>
            <div class="form-group-day" data-grouped-input>
                <label for="Child.DateOfBirth.Day">Day</label>
                <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Day must be a number." data-val-range="Day must be between 1 and 31." data-val-range-max="31" data-val-range-min="1" data-val-required="Day field is required" id="Child_DateOfBirth_Day" name="Child.DateOfBirth.Day" type="text" pattern="[0-9]*" inputmode="numeric">
            </div>

            <div class="form-group-month" data-grouped-input>
                <label for="Child.DateOfBirth.Month">Month</label>
                <input maxlength="2" class="form-control" data-val="true" data-val-number="The field Month must be a number." data-val-range="Month must be between 1 and 12." data-val-range-max="12" data-val-range-min="1" data-val-required="Month field is required" id="Child_DateOfBirth_Month" name="Child.DateOfBirth.Month" type="text" pattern="[0-9]*" inputmode="numeric">
            </div>

            <div class="form-group-year" data-grouped-input>
                <label for="Child.DateOfBirth.Year">Year</label>
                <input maxlength="4" class="form-control" data-val="true" data-val-number="The field Year must be a number." data-val-range="Day must be between 1980 and 2014." data-val-range-max="2014" data-val-range-min="1980" data-val-required="Year field is required" id="Child_DateOfBirth_Year" name="Child.DateOfBirth.Year" type="text" pattern="[0-9]*" inputmode="numeric">
            </div>

        </div>
    </fieldset>

</form>

<hr>

<div class="form-group">
    <label>
        <span class="form-label-bold">Invoice number</span>
    </label>
    <div class="form-split-inputs" data-grouped-inputs>
        <span class="digit">16</span>
        <span data-grouped-input>
            <input type="text" class="form-control" maxlength="6" size="8" id="invoices_inv_no" name="invoices_inv_no" name="invoices_inv_no[1]">
        </span>
        <span data-grouped-input>
            <input type="text" class="form-control" maxlength="10" size="14" id="invoices_inv_no" name="invoices_inv_no[2]">
        </span>
    </div>
</div>

<hr>

<div class="form-group">
    <label>
        <span class="form-label-bold">Invoice number</span>
    </label>
    <div class="form-split-inputs" data-grouped-inputs>
        <span class="digit">16</span>
        <input data-grouped-input type="text" class="form-control" maxlength="6" size="8" id="invoices_inv_no" name="invoices_inv_no" name="invoices_inv_no[1]">
        <input data-grouped-input type="text" class="form-control" maxlength="10" size="14" id="invoices_inv_no" name="invoices_inv_no[2]">
    </div>
</div>

Grouping Inputs Together

You can group inputs together by adding an attribute on the container (data-grouped-inputs - plural) and a similar attribute on a direct decedent, containing only one input (data-grouped-input - singular).

The plugin (grouped_inputs.js) does the following:

// Wrapper with input parents
<div data-grouped-inputs>
    <div data-grouped-input>
        <input maxlength="2">
    </div>

    <!-- A div works -->
    <div data-grouped-input>
        <input maxlength="4">
    </div>

    <!-- As does a span -->
    <span data-grouped-input>
        <input maxlength="4">
    </span>
</div>
// Wrapper without input parents
<div data-grouped-inputs>
    <input data-grouped-input maxlength="2">
    <input data-grouped-input maxlength="4">
</div>

Changelog

13th August 2015

17th August 2015