Form - Validations
One stop solution for perfect admin dashboard!
Two Column Form
<form class="p-20" id="two-column"> <h5 class="underline mt-n">Account Info</h5> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name13">Full Name <sup class="color-danger">*</sup></label> <input type="text" class="form-control" id="name13" placeholder="Enter Your Full Name" data-validation="required"> </div> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <div class="form-group"> <label for="username13">Username <sup class="color-danger">*</sup></label> <input type="text" class="form-control" id="username13" placeholder="Enter Desired Username" data-validation="length" data-validation-length="min5"> </div> </div> <!-- /.col-md-6 --> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="exampleInputEmail13">Email address <sup class="color-danger">*</sup></label> <input type="email" class="form-control" id="exampleInputEmail13" placeholder="Enter Your Email Id" data-validation="email" > </div> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <div class="form-group"> <label for="contact13">Contact Number</label> <input type="text" class="form-control" id="contact13" placeholder="Enter Your Mobile Phone Number"> </div> </div> <!-- /.col-md-6 --> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="exampleInputPassword13">Password <sup class="color-danger">*</sup></label> <input type="password" class="form-control" id="exampleInputPassword13" name="pass" placeholder="Enter Strong Password" data-validation="length" data-validation-length="min8"> </div> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <div class="form-group"> <label for="exampleInputPassword14">Confirm Password <sup class="color-danger">*</sup></label> <input type="password" class="form-control" id="exampleInputPassword14" placeholder="Confirm your password" data-validation="confirmation" data-validation-confirm="exampleInputPassword13"> </div> </div> <!-- /.col-md-6 --> </div> <div class="row"> <div class="col-md-12"> <div class="form-group checkbox"> <label> <input type="checkbox" data-validation="required"> I accept <a href="#" class="color-primary">terms & conditions</a> </label> </div> </div> <!-- /.col-md-12 --> <div class="col-md-12"> <div class="btn-group pull-right mt-10" role="group"> <button type="reset" class="btn btn-gray btn-wide"><i class="fa fa-times"></i>Cancel</button> <button type="submit" class="btn bg-black btn-wide"><i class="fa fa-arrow-right"></i>Submit</button> </div> <!-- /.btn-group --> </div> <!-- /.col-md-12 --> </div></form><!-- ========== JAVASCRIPT ========== --><script src="js/form-validator/jquery.form-validator.min.js"></script><script> $(function($) { $.validate({ form : '#two-column', modules : 'security' }); });</script>