Validation

<form class="usa-form validation-demo form-has-error">
    <fieldset>
        <legend class="usa-drop_text">Add Blood Pressure Entry</legend>

        <!-- Validation - Error Summary-->
        <div class="usa-alert usa-alert-error" style="display: none;" tabindex="0">
            <div class="usa-alert-body">
                <h3 class="usa-alert-heading">Errors found:</h3>
                <ul class="usa-checklist" id="validation_list">
                    <!-- generated by validation.js -->
                </ul>
            </div>
        </div>

        <!-- Start Date -->
        <label for="startDate" class="demo-has-error">Start Date</label>
        <!-- Datepicker input start -->
        <div class="vaux-date-picker-input" data-datepicker-trigger>
            <input id="startDate" name="startDate" type="text" aria-expanded="false">
            <button class="usa-button" aria-label="Open Calendar"><i class="fa fa-calendar" aria-hidden="true"></i>
            </button>
        </div>
        <!-- Datepicker input end -->

        <!-- Time -->
        <label for="time">Time</label>
        <!-- Datepicker input start -->
        <div class="vaux-date-picker-input" data-datepicker-trigger>
            <input id="startDate" name="startDate" type="text" aria-expanded="false">
            <button class="usa-button" aria-label="Open Calendar"><i class="fa fa-calendar" aria-hidden="true"></i>
            </button>
        </div>
        <!-- Datepicker input end -->

        <!-- Demonstration of error validation styling (see validation.js) -->
        <div class="demo-has-error show-if-1-error show-if-many-errors">
            <label>Systolic</label>
            <span class="usa-form-hint">mmHg</span>
            <span class="usa-input-error-message" id="input-error-message" role="alert" style="display: none;">Error: Systolic value is outside the expected range.</span>
            <input id="input-error" name="input-error" type="number" aria-describedby="input-error-message">
        </div>

        <div class="demo-has-error show-if-many-errors">
            <label>Diastolic</label>
            <span class="usa-form-hint">mmHg</span>
            <span class="usa-input-error-message" id="input-error-message" role="alert" style="display: none;">Error: Diastolic should be less than Systolic. Please check the values.</span>
            <input id="input-error" name="input-error" type="number" aria-describedby="input-error-message">
        </div>

        <div class="demo-has-error show-if-many-errors">
            <label>Pulse</label>
            <span class="usa-form-hint">bpm - between 20 and 250</span>
            <span class="usa-input-error-message" id="input-error-message" role="alert" style="display: none;">Error: Pulse field is required.</span>
            <input id="input-error" name="input-error" type="number" aria-describedby="input-error-message">
        </div>

        <label for="position">Position</label>
        <select name="position" id="position">
            <option value="value0">Select</option>
            <option value="value1">Option A</option>
            <option value="value2">Option B</option>
            <option value="value3">Option C</option>
        </select>

        <!-- Validation - Error -->
        <label>Note</label>
        <textarea id="input-error" name="input-error" aria-describedby="input-error-message"></textarea>

        <!-- Submit Buttons -->

        <button class="show-1-error">Save Entry (1 error)</button>
        <button class="show-multiple-errors">Save Entry (multiple errors)</button>
        <button class="usa-button-outline">Cancel</button>
    </fieldset>
</form>