Form Validation

<div class="app-container" ng-controller="FormValidationController">
    <div class="row collapse">
        <div class="medium-6 medium-centered columns fixed-width">
            <form novalidate="" name="form.applicationForm" ng-submit="submitForm()">
                <div class="app-card form-card">

                    <!-- Form error alert -->
                    <div ng-show="showAlert">
                        <div data-alert class="alert-box alert invert">
                            <span class="alert-icon ui-icon ui-medium">
                <svg>
                  <use xlink:href="#i-warning"></use>
                </svg>
              </span>
                            <p class="alert-body">
                                You&#x27;ll need to resolve any errors before moving on.
                            </p>
                            <a href="#" class="close ">&times;</a>
                        </div>
                    </div>

                    <!-- 1. Single Input with inline error -->
                    <div class="app-inner inset border-bottom">
                        <div class="form-group" ng-class="{ error: (inputInvalid('firstName')) }">
                            <h3 class="form-label caps ng-binding">Your Name</h3>
                            <label class="sr-only" for="applicantFirstName">First Name</label>
                            <input id="applicant_first_name" aria-describedby="applicant_first_name_error" name="firstName" ng-class="{ error: inputInvalid('firstName') }" ng-model="applicant.firstName" ng-required="true" placeholder="First Name" type="text" />
                            <small class="error" id="applicant_first_name_error" ng-if="inputInvalid('firstName')">
                Please enter a First Name
              </small>
                        </div>
                    </div>

                    <!-- 2. Multiple Inputs with inline error per field (address) -->
                    <div class="app-inner inset border-bottom">
                        <div class="form-group row has-option" ng-class="{error: addressInputInvalid('home_address')}">
                            <label class="form-label caps">Address</label>
                            <p class="form-note margin-bottom ">
                                We need the address where you currently live.
                            </p>
                            <div class="form-address row expand ng-scope">
                                <div class="form-group-street form-item large-12 columns" ng-class="{ error: inputInvalid('address1', addressType) }">
                                    <label class="sr-only ng-scope" for="applicant_home_address_address1">Street Address</label>
                                    <input aria-describedby="applicant_home_address_address1_error" id="applicant_home_address_address1" name="home_address_address1" ng-class="{ error: inputInvalid('address1', addressType) }" ng-disabled="applicant.noAddress" ng-model="applicant[addressType].address1"
                                        ng-required="!applicant.noAddress" placeholder="Street Address" type="text">
                                    <small class="error ng-hide" id="applicant_home_address_address1_error" ng-show="inputInvalid('address1', addressType)">Please enter an address</small>
                                </div>
                                <div class="form-group-apt large-12 column">
                                    <label for="applicant_home_address_address2">Apt or Unit #</label>
                                    <input id="applicant_home_address_address2" name="home_address_address2" ng-disabled="applicant.noAddress" ng-model="applicant[addressType].address2" placeholder="Apt or Unit #" type="text">
                                </div>
                                <div class="form-group-city form-item small-7 columns" ng-class="{ error: inputInvalid('city', addressType) }">
                                    <label for="applicant_home_address_city">City Name</label>
                                    <input aria-describedby="applicant_home_address_city_error" id="applicant_home_address_city" name="home_address_city" ng-class="{ error: inputInvalid('city', addressType) }" ng-disabled="applicant.noAddress" ng-model="applicant[addressType].city" ng-required="!applicant.noAddress"
                                        placeholder="City Name" type="text">
                                    <small class="error  ng-hide" id="applicant_home_address_city_error" ng-show="inputInvalid('city', addressType)">Please enter a city</small>
                                </div>
                                <div class="form-group-state form-item small-5 columns" ng-class="{ error: inputInvalid('state', addressType) }">
                                    <label for="applicant_home_address_state">State</label>
                                    <select aria-describedby="applicant_home_address_state_error" data-width="auto" id="applicant_home_address_state" name="home_address_state" ng-class="{ error: inputInvalid('state', addressType) }" ng-disabled="applicant.noAddress" ng-model="applicant[addressType].state"
                                        ng-required="!applicant.noAddress">
        <option value="">
          Select one
        </option>
          <option value="alabama">Alabama</option>
          <option value="alaska">Alaska</option>
          <option value="arizona">Arizona</option>
          <option value="arkansas">Arkansas</option>
          <option value="california">California</option>
          <option value="colorado">Colorado</option>
          <option value="connecticut">Connecticut</option>
          <option value="delaware">Delaware</option>
          <option value="district-of-columbia">District Of Columbia</option>
          <option value="florida">Florida</option>
          <option value="georgia">Georgia</option>
          <option value="hawaii">Hawaii</option>
          <option value="idaho">Idaho</option>
          <option value="illinois">Illinois</option>
          <option value="indiana">Indiana</option>
          <option value="iowa">Iowa</option>
          <option value="kansas">Kansas</option>
          <option value="kentucky">Kentucky</option>
          <option value="louisiana">Louisiana</option>
          <option value="maine">Maine</option>
          <option value="maryland">Maryland</option>
          <option value="massachusetts">Massachusetts</option>
          <option value="michigan">Michigan</option>
          <option value="minnesota">Minnesota</option>
          <option value="mississippi">Mississippi</option>
          <option value="missouri">Missouri</option>
          <option value="montana">Montana</option>
          <option value="nebraska">Nebraska</option>
          <option value="nevada">Nevada</option>
          <option value="new-hampshire">New Hampshire</option>
          <option value="new-jersey">New Jersey</option>
          <option value="new-mexico">New Mexico</option>
          <option value="new-york">New York</option>
          <option value="north-carolina">North Carolina</option>
          <option value="north-dakota">North Dakota</option>
          <option value="ohio">Ohio</option>
          <option value="oklahoma">Oklahoma</option>
          <option value="oregon">Oregon</option>
          <option value="pennsylvania">Pennsylvania</option>
          <option value="rhode-island">Rhode Island</option>
          <option value="south-carolina">South Carolina</option>
          <option value="south-dakota">South Dakota</option>
          <option value="tennessee">Tennessee</option>
          <option value="texas">Texas</option>
          <option value="utah">Utah</option>
          <option value="vermont">Vermont</option>
          <option value="virginia">Virginia</option>
          <option value="washington">Washington</option>
          <option value="west-virginia">West Virginia</option>
          <option value="wisconsin">Wisconsin</option>
          <option value="wyoming">Wyoming</option>
      </select>
                                    <small class="error  ng-hide" id="applicant_home_address_state_error" ng-show="inputInvalid('state', addressType)">Please enter a state</small>
                                </div>
                                <div class="form-group-zip form-item small-12 columns" ng-class="{ error: inputInvalid('zip', addressType) }">
                                    <label for="applicant_home_address_zip">Zip</label><input aria-describedby="applicant_home_address_zip_error" id="applicant_home_address_zip" name="home_address_zip" ng-class="{ error: inputInvalid('zip', addressType) }"
                                        ng-disabled="applicant.noAddress" ng-model="applicant[addressType].zip" ng-required="!applicant.noAddress" placeholder="Zipcode" type="text" ui-mask="99999" ui-mask-placeholder="">
                                    <small class="error" id="applicant_home_address_zip_error" ng-show="inputInvalid('zip', addressType)">Please enter a zipcode</small>
                                </div>
                            </div>
                            <div class="form-item padding-bottom">
                                <div class="checkbox">
                                    <input data-event="gtm-applicant-no-address" id="applicant_no_address" name="no_address" ng-change="applicant.hasAltMailingAddress = false;" ng-disabled="validMailingAddress() && !applicant.noAddress || addressFailedValidation('home_address') || applicant.hasAltMailingAddress"
                                        ng-model="applicant.noAddress" type="checkbox">
                                    <label for="applicant_no_address">I don't have an address</label>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- 3. Multiple inputs with single error for all inputs (date) -->
                    <div class="app-inner inset border-bottom">
                        <div class="form-group" ng-class="{ error: (inputInvalid('date_of_birth_day') || inputInvalid('date_of_birth_month') || inputInvalid('date_of_birth_year')) }">
                            <h3 class="form-label caps">Your Date of Birth</h3>
                            <div class="form-date-of-birth row collapse">
                                <div class="form-group-month large-2 columns">
                                    <label class="sr-only" for="date_of_birth_month">Day</label>
                                    <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_month" maxlength="2" name="date_of_birth_month" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_month') }" ng-model="applicant.dob_month"
                                        ng-required="true" numeric-only="" pattern="\d*" placeholder="MM" type="text" ui-validate="'DOBValid(\'month\', $value)'">
                                </div>
                                <div class="form-group-day large-2 columns">
                                    <label class="sr-only" for="date_of_birth_day">Month</label>
                                    <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_day" maxlength="2" name="date_of_birth_day" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_day') }" ng-model="applicant.dob_day"
                                        ng-required="true" numeric-only="" pattern="\d*" placeholder="DD" type="text" ui-validate="'DOBValid(\'day\', $value)'">
                                </div>
                                <div class="form-group-year large-2 columns end">
                                    <label class="sr-only" for="date_of_birth_year">Year</label>
                                    <input aria-describedby="date_of_birth_error" autocomplete="off" class="no-margin" id="date_of_birth_year" maxlength="4" name="date_of_birth_year" ng-change="recheckDOB('applicant')" ng-class="{ error: inputInvalid('date_of_birth_year') }" ng-model="applicant.dob_year"
                                        ng-required="true" numeric-only="" pattern="\d*" placeholder="YYYY" type="text" ui-validate="'DOBValid(\'year\', $value) && !primaryApplicantUnder18($value)'">
                                </div>
                            </div>

                            <small class="error" id="date_of_birth_error" ng-if="inputInvalid('date_of_birth_day') || inputInvalid('date_of_birth_month') || inputInvalid('date_of_birth_year')">
                <span ng-if="!primaryApplicantUnder18()">Please enter a valid Date of Birth</span>
                <span ng-if="primaryApplicantUnder18()">The primary applicant must be 18 years of age or older.</span>
              </small>
                        </div>
                    </div>

                    <!-- 4. Radio blocks -->
                    <div class="app-inner inset border-bottom">
                        <div class="form-group" ng-class="{ error: inputInvalid('workInSf') }">
                            <label class="form-label caps">
                Do you work in San Francisco?
              </label>
                            <p class="form-note margin-bottom">
                                This means you currently work in San Francisco at least 75% of your working hours.
                            </p>
                            <div aria-label="Do you work in San Francisco?" class="radio-group-inline double" role="radiogroup">
                                <div class="radio-block margin-bottom" aria-describedby="workInSf_error">
                                    <input aria-describedby="workInSf_error" id="workInSf_yes" name="workInSf" ng-class="{ error: inputInvalid('workInSf')}" ng-model="applicant.workInSf" ng-required="true" type="radio" value="Yes">
                                    <label class="radio-block_label" for="workInSf_yes">Yes</label>
                                </div>
                                <div class="radio-block margin-bottom" aria-describedby="workInSf_error">
                                    <input aria-describedby="workInSf_error" id="workInSf_no" name="workInSf" ng-class="{ error: inputInvalid('workInSf')}" ng-model="applicant.workInSf" ng-required="true" type="radio" value="No">
                                    <label class="radio-block_label" for="workInSf_no">No</label>
                                </div>
                            </div>
                            <small class="error" id="workInSf_error" ng-show="inputInvalid('workInSf')">
                This field is required.
              </small>
                        </div>
                    </div>

                    <!-- 5. Checkboxes -->
                    <div class="app-inner inset border-bottom">
                        <div class="form-group" ng-class="{error: inputInvalid('referral')}">
                            <label class="form-label caps" id="referral_label">
                How did you hear about this listing?
              </label>
                            <div class="checkbox-group" role="group">
                                <div class="form-item padding-bottom" ng-class="{error: inputInvalid('referral')}">
                                    <div class="checkbox">
                                        <input aria-describedby="referral_error" id="referral_newspaper" name="referral" ng-model="applicant.referral.newspaper" type="checkbox" ng-required="checkboxesEmpty('referral')" ng-class="{error: inputInvalid('referral')}">
                                        <label for="referral_newspaper">Newspaper</label>
                                    </div>
                                </div>
                                <div class="form-item padding-bottom" ng-class="{error: inputInvalid('referral')}">
                                    <div class="checkbox">
                                        <input aria-describedby="referral_error" id="referral_website" name="referral" ng-model="applicant.referral.website" type="checkbox" ng-required="checkboxesEmpty('referral')" ng-class="{error: inputInvalid('referral')}">
                                        <label for="referral_website">Website</label>
                                    </div>
                                </div>
                                <div class="form-item padding-bottom" ng-class="{error: inputInvalid('referral')}">
                                    <div class="checkbox">
                                        <input aria-describedby="referral_error" id="referral_flyer" name="referral" ng-model="applicant.referral.flyer" type="checkbox" ng-required="checkboxesEmpty('referral')" ng-class="{error: inputInvalid('referral')}">
                                        <label for="referral_flyer">Flyer</label>
                                    </div>
                                </div>
                                <small class="error" id="referral_error" ng-show="inputInvalid('referral')">This field is required.</small>
                            </div>
                        </div>
                    </div>

                    <!-- 5a. Terms checkbox -->
                    <div class="app-inner inset border-bottom">
                        <div class="form-item padding-bottom" ng-class="{error: inputInvalid('terms')}">
                            <div class="checkbox checkbox-inset margin-top--2x">
                                <input aria-describedby="terms_yes_error" id="terms_yes" name="terms" type="checkbox" ng-model="applicant.terms" ng-required="true" ng-class="{error: inputInvalid('terms')}">
                                <label for="terms_yes">I agree and understand that I cannot change anything after I submit.</label>
                            </div>

                            <small class="error" id="terms_error" ng-show="inputInvalid('terms')">
                You must agree to the terms in order to continue.
              </small>
                        </div>
                    </div>

                    <!-- 6. Checkbox group (preferences) -->
                    <div class="app-inner border-bottom">
                        <div class="form-group" ng-class="{error: inputInvalid('preferences')}">
                            <div class="checkbox-group" role="group">
                                <p class="checkbox-block">
                                    <input ng-class="{error: inputInvalid('preferences')}" id="preferences-certOfPreference" name="preferences" ng-model="applicant.preferences.cop" ng-required="checkboxesEmpty('preferences')" type="checkbox">
                                    <label class="checkbox-block_label" for="preferences-certOfPreference"><strong class="form-label caps">Certificate of Preference (COP)</strong>
                    <span class="checkbox-block_note">If you hold a Certificate of Preference (COP) from the former San Francisco Redevelopment Agency. COP holders were displaced by Agency action generally during the 1960s and 1970s.</span>
                  </label>
                                </p>
                                <p class="checkbox-block">
                                    <input ng-class="{error: inputInvalid('preferences')}" id="preferences-displaced" name="preferences" ng-model="applicant.preferences.dthp" ng-required="checkboxesEmpty('preferences')" type="checkbox">
                                    <label class="checkbox-block_label" for="preferences-displaced">
                     <strong class="form-label caps">Displaced Tenant Housing Preference (DTHP)</strong>
                     <span class="checkbox-block_note">If you hold a Displaced Tenant Housing Preference Certificate (DTHP). DTHP Certificate holders are people who have been evicted through either an Ellis Act Eviction or an Owner Move In Eviction in 2010 or later.</span>
                   </label>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- 7. Input with radio buttons (income) -->
                    <div class="app-inner inset">
                        <div class="form-group" ng-class="{ error: (inputInvalid('incomeTotal') || inputInvalid('incomeTimeframe')) }">
                            <label class="form-label margin-bottom--half">
                What is your household total pre-tax income?
              </label>
                            <div class="form-income">
                                <label class="sr-only" for="incomeTotal">Income</label>
                                <span class="label-dollar">$</span>
                                <input aria-describedby="incomeTotal_error" class="form-income_input" currency-symbol="" id="incomeTotal" name="incomeTotal" ng-change="invalidateIncomeForm()" ng-class="{ error: inputInvalid('incomeTotal') }" ng-currency="" ng-model="applicant.householdIncome.incomeTotal"
                                    ng-required="true" placeholder="Total all of your income sources" type="text">
                                <small class="error" id="incomeTotal_error" ng-show="inputInvalid('incomeTotal')">
                  Please enter an income amount
                </small>
                            </div>
                            <div aria-label="Income" class="radio-group" ng-class="{ error: inputInvalid('incomeTimeframe') }" role="radiogroup">
                                <p class="radio-block">
                                    <input id="per_month" name="incomeTimeframe" ng-model="applicant.householdIncome.incomeTimeframe" ng-required="true" type="radio" value="per_month">
                                    <label class="radio-block_label" for="per_month">per month</label>
                                </p>
                                <p class="radio-block">
                                    <input aria-describedby="per_year_error" id="per_year" name="incomeTimeframe" ng-click="invalidateIncomeForm()" ng-model="applicant.householdIncome.incomeTimeframe" ng-required="true" type="radio" value="per_year">
                                    <label class="radio-block_label" for="per_year">per year</label>
                                </p><small class="error" id="per_year_error" ng-show="inputInvalid('incomeTimeframe')" aria-hidden="true">Please enter an income timeframe</small>
                            </div>
                        </div>
                    </div>

                    <div class="button-pager">
                        <div class="button-pager_row primary">
                            <input aria-invalid="false" class="button primary radius" id="submit" ng-disabled="isLoading()" type="submit" value="Submit">
                        </div>
                        <div class="button-pager_row">
                            <button ng-click="resetForm($event)" class="button button-link button-lined small-text-center expand-small">Reset form</a>
              <button ng-click="fillForm($event)" class="button button-link button-lined small-text-center expand-small">Fill out form</a>
            </div>
          </div>

        </div>
      </form>
    </div>
  </div>
</div>