Validation

If a form is in an error state, it will automatically show any error message blocks.

Example #

HTML
<form name="bs-form" class="bs-form-wrapper" data-behavior-is="validation-form">
    <div class="bs-from-item">
        <label for="name">Name</label>
        <input id="name" type="text" name="name" placeholder="Name" data-required="true" />
    </div>
    <div class="bs-from-item">
        <label for="email">Email Address</label>
        <input id="email" type="email" name="email" placeholder="Email Address" data-required="true" />
    </div>
    <div class="bs-from-item">
        <label for="phone">Phone Number</label>
        <input id="phone" type="tel" name="phone" placeholder="Phone Number" maxlength="13" data-required="true" />
    </div>
    <div class="bs-from-item">
        <label for="gender">Gender</label>
        <input id="male" type="radio" name="gender" /><label class="radio-label" for="male">Male</label>
        <input id="female" type="radio" name="gender" /><label class="radio-label" for="female">Female</label>
    </div>
    <div class="bs-from-item">
        <label for="organisation">Organisation</label>
        <input id="organisation" type="text" name="organisation" placeholder="Organisation" />
    </div>
    <div class="bs-from-item">
        <label for="profile">Profile</label>
        <select id="profile" name="profile">
        <option value="-1">Please select</option>
        <option value="1">Media</option>
        <option value="2">Employee</option>
        <option value="3">Goverment</option>
        <option value="4">Other</option>
        </select>
    </div>
    <div class="bs-from-item">
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </div>
</form>

Input has data-required="true" are mandatory fields.