Back to Snippets List

form - Form Validation

Which types of waste do you transport regularly?

Select all that apply

Date of birth

For example, 31 3 1980

Are your personal details correct and up-to-date?
Do you know their National Insurance number?
<form action="" method="post">
    <div class="form-group">
        <label for="Child.LastName">
            <span class="form-label-bold">First Name</span>
        </label>
        <input class="form-control"
            id="Child_FirstName"
            name="Child.FirstName"
            type="text"
            value=""
            data-val="true"
            data-val-length="First name must be minimum 3 characters and maximum 30"
            data-val-length-max="30"
            data-val-length-min="3"
            data-val-required="The First name field is required.">
    </div>

    <div class="form-group">
        <label for="Child.LastName">
            <span class="form-label-bold">Last Name</span>
        </label>
        <input class="form-control"
            id="Child_LastName"
            name="Child.LastName"
            type="text"
            value=""
            data-val="true"
            data-val-length="Last name must be minimum 3 characters and maximum 30"
            data-val-length-max="30"
            data-val-length-min="3"
            data-val-required="The Last name field is required.">
    </div>

    <div class="form-group">
        <label for="Child.LastName">
            <span class="form-label-bold">Date of birth</span>
        </label>
        <input class="form-control"
            name="Child.DateOfBirth.Day"
            type="number"
            id="Child_DateOfBirth_Day"
            value=""
            max="31"
            min="0"
            pattern="[0-9]*"
            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-regex="Please enter a valid day."
            data-val-regex-pattern="\d{1,31}"
            data-val-required="The Day field is required.">
    </div>

    <div class="form-group">
        <fieldset>
            <legend class="form-label-bold">Which types of waste do you transport regularly?</legend>
            <p>Select all that apply</p>
            <label class="block-label" for="checkbox-1">
                <input id="checkbox-1" type="checkbox" value="waste-animal"> Waste from animal carcasses
            </label>
            <label class="block-label" for="checkbox-2">
                <input id="checkbox-2" type="checkbox" value="waste-mines"> Waste from mines or quarries
            </label>
        </fieldset>
    </div>

    <div class="form-group">
        <div class="form-select">
            <select name="" id="">
                <option value="Lorem ipsum dolor">Lorem ipsum dolor</option>
                <option value="Dolor sit amet">Dolor sit amet</option>
            </select>
            <span class="arrow"></span>
        </div>
    </div>

    <div class="form-group">
        <fieldset>
            <legend>
                <span class="form-label-bold">
            Date of birth
          </span>
            </legend>
            <div class="form-date">
                <p class="form-hint">For example, 31 3 1980</p>
                <div class="form-group form-group-day">
                    <label for="dob-day">Day</label>
                    <input class="form-control" id="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
                </div>
                <div class="form-group form-group-month">
                    <label for="dob-month">Month</label>
                    <input class="form-control" id="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
                </div>
                <div class="form-group form-group-year">
                    <label for="dob-year">Year</label>
                    <input class="form-control" id="dob-year" type="number" pattern="[0-9]*" min="0" max="2014">
                </div>
            </div>
        </fieldset>
    </div>
    <div class="form-group ">
        <fieldset>
            <legend>
                <span class="form-label-bold">
            Are your personal details correct and up-to-date?
          </span>
            </legend>
            <label class="block-label" for="personal_details_yes">
                <input id="personal_details_yes" type="radio" name="personal_details" value="Yes">
                <span></span> Yes, my personal details are correct
            </label>
            <label class="block-label" for="personal_details_no">
                <input id="personal_details_no" type="radio" name="personal_details" value="No">
                <span></span> No, some details are wrong or have changed
            </label>
        </fieldset>
    </div>

    <div class="form-group">
        <fieldset class="inline">
            <legend>
                <span class="form-label">
              Do you know their National Insurance number?
            </span>
            </legend>
            <div class="form-group form-group-compound">
                <label class="block-label" data-target="example-ni-no" for="radio-indent-1">
                    <input id="radio-indent-1" type="radio" name="radio-indent-group" value="Yes"> Yes
                </label>
                <label class="block-label" for="radio-indent-2">
                    <input id="radio-indent-2" type="radio" name="radio-indent-group" value="No"> No
                </label>
            </div>
            <div class="panel-indent js-hidden" id="example-ni-no">
                <label class="form-label" for="national-insurance">National Insurance number</label>
                <input class="form-control" type="text" id="national-insurance">
            </div>
        </fieldset>
    </div>

    <div class="form-group">
        <button class="button">Continue</button>
    </div>
</form>

Some of these have validation examples, some others don't.