<form class="usa-form validation-demo form-has-error">
<fieldset>
<legend class="usa-drop_text">Add Blood Pressure Entry</legend>
<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">
</ul>
</div>
</div>
<label for="startDate" class="demo-has-error">Start Date</label>
<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>
<label for="time">Time</label>
<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>
<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>
<label>Note</label>
<textarea id="input-error" name="input-error" aria-describedby="input-error-message"></textarea>
<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>