forms

<!-- Text -->
<h2>Form Text Input</h2>
<!-- Text Input Only -->
<div class="text">
    <label class="text__label" for="solo_textinput">Label</label>
    <input class="text__input" type="text" name="solo_textinput">
    <span class="text__help">Helpful text goes here</span>
    <span class="text__error">Error message is hidden</span>
</div>

<!-- Text Input in Form -->
<form class="example-form-short">
    <div class="text">
        <label class="text__label" for="example_textinput">Label</label>
        <input class="text__input" type="text" name="example_textinput">
        <span class="text__help">Helpful text goes here</span>
        <span class="text__error">Error message is hidden</span>
    </div>
    <button type="submit" class="btn btn--lightbg">Submit To Trigger Error</button>
</form>

<!-- Full Width Text Input in Form -->
<form class="example-form-full-width">
    <div class="text full-width" style="width: 600px; max-width: 100%;">
        <label class="text__label" for="example_textinput-fullwidth">Label</label>
        <input class="text__input" type="text" name="example_textinput-fullwidth">
        <span class="text__help">Helpful text goes here</span>
        <span class="text__error">Error message is hidden</span>
    </div>
    <button type="submit" class="btn btn--lightbg">Submit To Trigger Error</button>
</form>

<!-- Example Error Handling -->
<script>
    $(document).ready(function() {
        $(".example-form-short").submit(function(e) {
            e.preventDefault();
            // Example error returned from server
            var jsonReturned = {
                "errors": [{
                    "example_textinput": "Error message here"
                }]
            };
            var errorsArr = jsonReturned.errors;
            // Example parsing of JSON data
            if (errorsArr.length) {
                for (var i = 0; i < errorsArr.length; i++) {
                    for (key in errorsArr[i]) {
                        var inputFieldName = key;
                        var inputErrorMessage = errorsArr[i][key];
                        // call UCLA Script Library function to update error message and show error message
                        triggerError(inputFieldName, inputErrorMessage);
                    }
                }
            }
        })
        $(".example-form-full-width").submit(function(e) {
            e.preventDefault();
            // Example error returned from server
            var jsonReturned = {
                "errors": [{
                    "example_textinput-fullwidth": "Error message here"
                }]
            };
            var errorsArr = jsonReturned.errors;
            // Example parsing of JSON data
            if (errorsArr.length) {
                for (var i = 0; i < errorsArr.length; i++) {
                    for (key in errorsArr[i]) {
                        var inputFieldName = key;
                        var inputErrorMessage = errorsArr[i][key];
                        // call UCLA Script Library function to update error message and show error message
                        triggerError(inputFieldName, inputErrorMessage);
                    }
                }
            }
        })
    })
</script>

<!-- Fieldset Legend -->
<h2 class="mt-24">Fieldset Legend</h2>
<!-- Fieldset Legend Only -->
<fieldset class="fieldset">
    <legend class="fieldset__legend">Legend Element</legend>
</fieldset>

<!-- Fieldset with Form Inputs -->
<form>
    <fieldset class="fieldset">
        <legend class="fieldset__legend">Legend Element</legend>
        <!-- text input -->
        <div class="text full-width">
            <label class="text__label" for="example_textinput">Label</label>
            <input class="text__input" type="text" name="example_textinput" placeholder="Type something">
            <span class="text__error">Error message is hidden</span>
        </div>
        <div class="radio">
            <input class="radio__input" type="radio" name="radio" value="radio1">
            <label class="radio__label" for="">Radio 1</label>
            <input class="radio__input" type="radio" name="radio" value="radio2">
            <label class="radio__label" for="">Radio 2</label>
        </div>
        <div class="select full-width">
            <label class="select__label" for="example_selection-fullwidth">Full-width Label and Dropdown Menu</label>
            <select class="select__menu" name="example_selection-fullwidth">
                <option class="select__placeholder" disabled selected>Make a selection</option>
                <option class="select__option" value="Epsum">Epsum factorial non deposit quid</option>
                <option class="select__option" value="Pro">Pro quo hic escorol olypian</option>
                <option class="select__option" value="Et">Et gorilla congolium sic</option>
                <option class="select__option" value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
                <option class="select__option" value="Ad">This selection is an error</option>
            </select>
            <span class="select__help">Helpful text goes here</span>
            <span class="select__error">Error message is hidden</span>
        </div>
        <div class="checkbox">
            <input type="checkbox" class="checkbox__input" name="example_checkbox" />
            <label class="checkbox__label" for="example_checkbox">Textbox label</label>
        </div>
    </fieldset>
</form>

<!-- Select Menu -->
<h2 class="mt-24">Select Menu</h2>
<!-- Select Menu Only -->
<div class="select">
    <label class="select__label" for="solo_selection">Label</label>
    <select class="select__menu" name="solo_selection">
        <option class="select__placeholder" disabled selected>Make a selection</option>
        <option class="select__option" value="Epsum">Epsum factorial non deposit quid</option>
        <option class="select__option" value="Pro">Pro quo hic escorol olypian</option>
        <option class="select__option" value="Et">Et gorilla congolium sic</option>
        <option class="select__option" value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
    </select>
    <span class="select__help">Helpful text goes here</span>
    <span class="select__error">Error message hidden</span>
</div>

<!-- Select Menu in Form -->
<form class="example-form-short">
    <div class="select">
        <label class="select__label" for="example_selection">Label</label>
        <select class="select__menu" name="example_selection">
            <option class="select__placeholder" disabled selected>Make a selection</option>
            <option class="select__option" value="Epsum">Epsum factorial non deposit quid</option>
            <option class="select__option" value="Pro">Pro quo hic escorol olypian</option>
            <option class="select__option" value="Et">Et gorilla congolium sic</option>
            <option class="select__option" value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
        </select>
        <span class="select__help">Helpful text goes here</span>
        <span class="select__error">Error message hidden</span>
    </div>
    <button class="btn btn--lightbg">Submit To Trigger Error</button>
</form>

<!-- Full Width Select Menu in Form -->
<form class="example-form-full-width">
    <div class="select full-width" style="width: 600px; max-width: 100%;">
        <label class="select__label" for="example_selection-fullwidth">Full-width Label and Dropdown Menu</label>
        <select class="select__menu" name="example_selection-fullwidth">
            <option class="select__placeholder" disabled selected>Make a selection</option>
            <option class="select__option" value="Epsum">Epsum factorial non deposit quid</option>
            <option class="select__option" value="Pro">Pro quo hic escorol olypian</option>
            <option class="select__option" value="Et">Et gorilla congolium sic</option>
            <option class="select__option" value="Ad">Ad nauseum souvlaki ignitus carborundum</option>
            <option class="select__option" value="Ad">This selection is an error</option>
        </select>
        <span class="select__help">Helpful text goes here</span>
        <span class="select__error">Error message is hidden</span>
    </div>
    <button class="btn btn--lightbg">Submit To Trigger Error</button>
</form>

<!-- Example Error Handling -->
<script>
    $(document).ready(function() {
        $(".example-form-short").submit(function(e) {
            e.preventDefault();
            // Example error returned from server
            var jsonReturned = {
                "errors": [{
                    "example_selection": "This is not a valid selection"
                }]
            };
            var errorsArr = jsonReturned.errors;
            // Example parsing of JSON data
            if (errorsArr.length) {
                for (var i = 0; i < errorsArr.length; i++) {
                    for (key in errorsArr[i]) {
                        var inputFieldName = key;
                        var inputErrorMessage = errorsArr[i][key];
                        // call UCLA Script Library function to update error message and show error message
                        triggerError(inputFieldName, inputErrorMessage);
                    }
                }
            }
        });
        $(".example-form-full-width").submit(function(e) {
            e.preventDefault();
            // Example error returned from server
            var jsonReturned = {
                "errors": [{
                    "example_selection-fullwidth": "This is not a valid selection"
                }]
            };
            var errorsArr = jsonReturned.errors;
            // Example parsing of JSON data
            if (errorsArr.length) {
                for (var i = 0; i < errorsArr.length; i++) {
                    for (key in errorsArr[i]) {
                        var inputFieldName = key;
                        var inputErrorMessage = errorsArr[i][key];
                        // call UCLA Script Library function to update error message and show error message
                        triggerError(inputFieldName, inputErrorMessage);
                    }
                }
            }
        });
    });
</script>

<!-- Radio -->
<h2 class="mt-24">Radio Input</h2>
<div class="radio" style="margin-left: 5px">
    <input class="radio__input" type="radio" name="radio" value="radio1">
    <label class="radio__label" for="">Radio 1</label>
    <input class="radio__input" type="radio" name="radio" value="radio2">
    <label class="radio__label" for="">Radio 2</label>
</div>

<!-- Checkbox -->
<h2 class="mt-24">Checkbox Input</h2>
<div class="checkbox" style="margin-left: 10px; margin-top: 10px;">
    <input type="checkbox" class="checkbox__input" name="example_checkbox" />
    <label class="checkbox__label" for="example_checkbox">Textbox label</label>
</div>