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.