@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>
            Form Validation
            <small>Validating forms frontend have never been so powerful and easy.</small>
        </div>
    </div>
    <!-- START row-->
    <div class="row">
        <div class="col-xl-6">
            <form method="post" action="#" data-parsley-validate="" novalidate="">
                <!-- START card-->
                <div class="card card-default">
                    <div class="card-header">
                        <div class="card-title">Form Register</div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label class="col-form-label">Email Address *</label>
                            <input class="form-control" type="text" name="email" required="required" />
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">Password *</label>
                            <input class="form-control" id="id-password" type="password" name="password" required="required" />
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">Confirm Password *</label>
                            <input class="form-control" type="password" name="confirmPassword" required="required" data-parsley-equalto="#id-password" />
                        </div>
                        <div class="required">* Required fields</div>
                    </div>
                    <div class="card-footer">
                        <div class="clearfix">
                            <div class="float-left">
                                <div class="checkbox c-checkbox">
                                    <label>
                                        <input type="checkbox" name="agreements" required="required" data-parsley-error-message="Please read and agree the terms" />
                                        <span class="fa fa-check"></span>
                                        I agree with the
                                        <a class="ml-2" href="#">terms</a>
                                    </label>
                                </div>
                            </div>
                            <div class="float-right"><button class="btn btn-primary" type="submit">Register</button></div>
                        </div>
                    </div>
                </div>
                <!-- END card-->
            </form>
        </div>
        <div class="col-xl-6">
            <form method="post" data-parsley-validate="" novalidate="">
                <!-- START card-->
                <div class="card card-default">
                    <div class="card-header">
                        <div class="card-title">Form Login</div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label class="col-form-label">Email Address *</label>
                            <input class="form-control" type="text" name="email" required="required" />
                        </div>
                        <div class="form-group">
                            <label class="col-form-label">Password *</label>
                            <input class="form-control" type="password" name="password" required="required" />
                        </div>
                        <div class="required">* Required fields</div>
                    </div>
                    <div class="card-footer"><button class="btn btn-primary" type="submit">Login</button></div>
                </div>
                <!-- END card-->
            </form>
        </div>
    </div>
    <!-- END row-->
    <!-- START row-->
    <div class="row">
        <div class="col-lg-12">
            <form class="form-horizontal" action="#" data-parsley-validate="" novalidate="">
                <!-- START card-->
                <div class="card card-default">
                    <div class="card-header">
                        <div class="card-title">Fields validation</div>
                    </div>
                    <div class="bg-gray-lighter px-3 py-2 my-3">Type validation</div>
                    <div class="card-body">
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Required Text</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="required" required="required" /></div>
                                <div class="col-md-4"><code>required</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Email</label>
                                <div class="col-md-6"><input class="form-control" type="email" name="email" data-parsley-type="email" /></div>
                                <div class="col-md-4"><code>data-parsley-type="email"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Number</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="number" data-parsley-type="number" /></div>
                                <div class="col-md-4"><code>data-parsley-type="number"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Integer</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="integer" data-parsley-type="integer" /></div>
                                <div class="col-md-4"><code>data-parsley-type="integer"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Digits</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="digits" data-parsley-type="digits" /></div>
                                <div class="col-md-4"><code>data-parsley-type="digits"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Alphanum</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="alphanum" data-parsley-type="alphanum" /></div>
                                <div class="col-md-4"><code>data-parsley-type="alphanum"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Url</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="url" data-parsley-type="url" /></div>
                                <div class="col-md-4"><code>data-parsley-type="url"</code></div>
                            </div>
                        </fieldset>
                        <fieldset class="m-0">
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Equal to</label>
                                <div class="col-md-3"><input class="form-control" id="id-source" type="text" placeholder="#id-source" /></div>
                                <div class="col-md-3"><input class="form-control" type="text" data-parsley-equalto="#id-source" /></div>
                                <div class="col-md-4"><code>data-parsley-equalto='#id-source'</code></div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="bg-gray-lighter px-3 py-2 mb-3">Range validation</div>
                    <div class="card-body">
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Minlength</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="minlength" data-parsley-minlength="6" /></div>
                                <div class="col-md-4"><code>data-parsley-minlength="6"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Maxlength</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="maxlength" data-parsley-maxlength="10" /></div>
                                <div class="col-md-4"><code>data-parsley-maxlength="10"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Length</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="length" data-parsley-length="[6, 10]" /></div>
                                <div class="col-md-4"><code>data-parsley-length="[6, 10]"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Min</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="min" data-parsley-min="6" /></div>
                                <div class="col-md-4"><code>data-parsley-min="6"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Max</label>
                                <div class="col-md-6"><input class="form-control" type="text" name="max" data-parsley-max="6" /></div>
                                <div class="col-md-4"><code>data-parsley-max="6"</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Min words</label>
                                <div class="col-md-6"><input class="form-control" type="text" data-minwords="6" /></div>
                                <div class="col-md-4"><code>data-minwords='6'</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Max words</label>
                                <div class="col-md-6"><input class="form-control" type="text" data-maxwords="6" /></div>
                                <div class="col-md-4"><code>data-maxwords='6'</code></div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="form-group row">
                                <label class="col-md-2 col-form-label">Range of words</label>
                                <div class="col-md-6"><input class="form-control" type="text" data-rangewords="[6,10]" /></div>
                                <div class="col-md-4"><code>data-rangewords='[6,10]'</code></div>
                            </div>
                        </fieldset>
                    </div>
                    <div class="card-footer text-center"><button class="btn btn-info" type="submit">Run validation</button></div>
                </div>
                <!-- END card-->
            </form>
        </div>
    </div>
    <!-- END row-->
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/validation.js') }}"></script>
@endsection
