Form Validation
A JQuery validation plugin for bootstrap forms.For more info please visit the plugin'sDemo Page or Github Repo.
Basic Form Validation
<form class="form-horizontal error" novalidate>
<div class="row">
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="text" class="form-control" placeholder="username" required data-validation-required-message="Full Name Required" />
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="email" class="form-control" placeholder="example@domain.com" required data-validation-required-message="Email Fill is Required" />
</div>
</div>
</div>
</div>
<button class="btn btn-raised-primary" type="submit">Submit</button>
</form>
<script>
$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
</script>
Inputs Validation
<form class="form-horizontal error" novalidate>
<div class="row">
<div class="col-md-4 mb-md">
<div class="control-group ">
<div class="controls">
<input type="text" class="form-control" placeholder="username" required data-validation-required-message="Full Name Required" />
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="number" class="form-control" placeholder="type number..." required data-validation-required-message="type number" />
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="number" class="form-control" placeholder="ENTER NUMBER BETWEEN 1 & 10" required data-validation-required-message="type number" max="10" name="some_field" />
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="text" name="numeric" class="form-control" required="" data-validation-containsnumber-regex="(d)+" data-validation-containsnumber-message="The number field may only contain number not characters." placeholder="Enter Numbers only" />
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="text" name="alpha" class="form-control" required="" data-validation-containsnumber-regex="^[a-zA-Z]+$" data-validation-containsnumber-message="The character field may only contain characters." placeholder="Enter Character only">
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="text" name="minChar" class="form-control" data-validation-required-message="The min field must be at least 5 characters." minlength="5" placeholder="Enter minimum 5 characters" >
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="text" name="digit" class="form-control" data-validation-regex-regex="([^a-z]*[A-Z]*)*" data-validation-containsnumber-regex="([^0-9]*[0-9]+)+" data-validation-required-message="The digits field must be numeric and exactly contain 5 digits" maxlength="5" minlength="5" placeholder="Enter Exactly 5 digits">
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="password" name="password" class="form-control" data-validation-required-message="This field is required" placeholder="Password">
</div>
</div>
</div>
<div class="col-md-4 mb-md">
<div class="control-group">
<div class="controls">
<input type="password" name="password2" data-validation-match-match="password" class="form-control" data-validation-required-message="Confirm password must match" placeholder="Confirm Password">
</div>
</div>
</div>
</div>
<button class="btn btn-raised-primary" type="submit">Submit</button>
</form>
<script>
$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
</script>
Buy Arctic
All rights reserved © UI Lib 2020