<div ng-controller="formValidationController">
	<!-- begin breadcrumb -->
	<ol class="breadcrumb float-xl-right">
		<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
		<li class="breadcrumb-item"><a href="javascript:;">Form Stuff</a></li>
		<li class="breadcrumb-item active">Form Validation</li>
	</ol>
	<!-- end breadcrumb -->
	<!-- begin page-header -->
	<h1 class="page-header">Form Validation <small>header small text goes here...</small></h1>
	<!-- end page-header -->
	
	<form class="form-horizontal" name="validationForm" ng-submit="submitForm(validationForm)" novalidate>
		<div class="form-group row m-b-10">
			<label class="col-form-label col-sm-3" for="fullname">Full Name <span class="text-danger">*</span></label>
			<div class="col-sm-3">
				<input type="text" class="form-control" ng-model="form.fullname" name="fullname" placeholder="Required" required />
			</div>
		</div>
		<div class="form-group row m-b-10">
			<label class="col-form-label col-sm-3">Required Select Box <span class="text-danger">*</span></label>
			<div class="col-sm-3">
				<select class="form-control" name="selectBox" ng-model="form.selectBox" required>
					<option value="">Please choose</option>
					<option value="foo">Foo</option>
					<option value="bar">Bar</option>
				</select>
			</div>
		</div>
		<div class="form-group row m-b-10">
			<label class="col-form-label col-sm-3">Required Radio Button <span class="text-danger">*</span></label>
			<div class="col-sm-6">
				<div class="radio mt-2">
					<label>
						<input type="radio" name="radioRequired" ng-model="form.radioRequired" value="foo" class="mr-2" required /> Radio Button 1
					</label>
				</div>
				<div class="radio">
					<label class="mb-0">
						<input type="radio" name="radioRequired" ng-model="form.radioRequired" value="bar" class="mr-2" required /> Radio Button 2
					</label>
				</div>
			</div>
		</div>
		<div class="form-group row m-b-10 d-flex align-items-center">
			<label class="col-form-label col-sm-3">Required Checkbox <span class="text-danger">*</span></label>
			<div class="col-sm-6">
				<div class="checkbox">
					<label class="mb-0">
						<input type="checkbox" name="requiredCheckbox" ng-model="form.requiredCheckbox" value="foo" class="mr-2" required /> Checkbox
					</label>
				</div>
			</div>
		</div>
		<div class="form-group row m-b-10">
			<label class="col-form-label col-sm-3" for="message">Message (20 chars min, 200 max) <span class="text-danger">*</span></label>
			<div class="col-sm-6">
				<textarea class="form-control" name="message" rows="4" ng-minlength="20" ng-maxlength="200" ng-model="form.message" placeholder="Range from 20 - 200" required></textarea>
			</div>
		</div>
		<div class="form-group row m-b-10">
			<label class="col-form-label col-sm-3" for="email">Email Address</label>
			<div class="col-sm-6">
				<input type="email" class="form-control" name="email" placeholder="Email" ng-model="form.email" />
			</div>
		</div>
		<div class="form-group row m-b-10">
			<label class="col-form-label col-sm-3" for="website">Website</label>
			<div class="col-sm-6">
				<input type="url" class="form-control" name="website" placeholder="url" ng-model="form.url" />
			</div>
		</div>
		<div class="form-group row m-b-10">
			<label class="col-form-label col-sm-3" for="message">Number</label>
			<div class="col-sm-6">
				<input type="number" class="form-control" name="number" placeholder="Number" ng-model="form.number" />
			</div>
		</div>
		<div class="form-group row m-b-10">
			<label class="col-form-label col-sm-3" for="message">Regular Expression</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" name="alphabets" placeholder="Alphabets" ng-model="form.alphabets" ng-pattern="/^[A-z]+$/" />
			</div>
		</div>
		<hr />
		<div class="form-group row m-b-0">
			<label class="col-form-label col-sm-3"></label>
			<div class="col-sm-6">
				<button type="submit" class="btn btn-success width-xs">Validate</button>
			</div>
		</div>
	</form>
</div>
