## Form - Validations

One stop solution for perfect admin dashboard!

Toggle Code!

##### Two Column Form

##### Account Info

Full Name *
Username *
Email address *
Contact Number
Password *
Confirm Password *
I accept terms & conditions

    <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>