{% layout 'layout' %}
{% block title %}Form Validation{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">Advanced Forms</a></li>
<li class="active"><a href="ui-forms.html">Form Validation</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
<script>
// See Docs
	window.ParsleyConfig = {
    	  successClass: 'has-success'
		, errorClass: 'has-error'
		, errorElem: '<span></span>'
		, errorsWrapper: '<span class="help-block"></span>'
		, errorTemplate: "<div></div>"
		, classHandler: function(el) {
    		return el.$element.closest(".form-group");
		}
	};
</script>
{{ "plugins/form-parsley/parsley.js" | asset_url | script_tag }}  					<!-- Validate Plugin / Parsley -->
{{ "demo/demo-formvalidation.js" | asset_url | script_tag }}
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-xs-12">
        <div class="panel panel-midnightblue">
          <div class="panel-heading">
                <h2>Form Validation States</h2>
          </div>
          <div class="panel-body">
            <p>Avenger includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles</p>
                <form action="" class="form-horizontal row-border">
                    <div class="form-group has-success">
                        <label for="" class="col-md-3 control-label">Input with Success</label>
                        <div class="col-md-6"><input type="text" class="form-control"></div>
                        <div class="col-md-3"><p class="help-block"><i class="fa fa-check"></i> Great success!</p></div>
                    </div>
                    <div class="form-group has-warning">
                        <label for="" class="col-md-3 control-label">Input with Warning</label>
                        <div class="col-md-6"><input type="text" class="form-control"></div>
                        <div class="col-md-3"><p class="help-block"><i class="fa fa-exclamation-triangle"></i> Be careful!</p></div>
                    </div>
                    <div class="form-group has-error">
                        <label for="" class="col-md-3 control-label">Input with Error</label>
                        <div class="col-md-6"><input type="text" class="form-control"></div>
                        <div class="col-md-3"><p class="help-block"><i class="fa fa-times-circle"></i> Oops! Not wow.</p></div>
                    </div>
                </form>
          </div>
        </div>
    </div>


    <div class="col-xs-12">
	    <div class="alert alert-info">
	    <h3>Parsley <small>Form Validation</small></h3>
			 <p>The goal of web form validation is to ensure that the user provided necessary and properly formatted information needed to successfully complete an operation. With Avenger, you can have front-end, UX-aware form validation without writing a single line of code! Click Submit for the validation to take in effect.</p>
		</div>

        <div class="panel panel-midnightblue">
            <div class="panel-heading"><h2>Form Validation</h2></div>
            <div class="panel-body">

                <form class="form-horizontal row-border" id="validate-form" data-parsley-validate>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">Required Field</label>
                        <div class="col-sm-6">
                            <input type="text" placeholder="Required Field" required class="form-control">
                        </div>
                    </div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Min-length</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-minlength="6" placeholder="At least 6 characters" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Max-legnth</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-maxlength="6" placeholder="At most 6 characters" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Range length</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-range="[5,10]" placeholder="Between 5 and 10 characters" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">RegExp</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-pattern="#[A-Fa-f0-9]{6}" placeholder="Hexadecimal Color Code" required class="form-control">
					    </div>
					</div>

					<div class="form-group">
					    <label class="col-sm-3 control-label">Email</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-type="email" placeholder="Email address" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">URL</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-type="url" placeholder="URL address" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Digits</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-type="digits" placeholder="Digits only" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Alphanum</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-type="alphanum" placeholder="Alphanumeric only" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Password</label>
					    <div class="col-sm-6">
					        <input type="text" id="ps1" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Repeat Password</label>
					    <div class="col-sm-6">
					        <input type="text" data-parsley-equalto="#ps1" required class="form-control">
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-3 control-label">Checkbox</label>
					    <div class="col-sm-6">
					        <div class="checkbox">
					          <label>
					            <input type="checkbox" required name="terms">
					            Accept Terms &amp; Conditions
					          </label>
					      </div>
					  </div>
					</div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-sm-6 col-sm-offset-3">
                                <div class="btn-toolbar">
                                	<span class="btn btn-default">Submit</span>
                                    <button class="btn btn-default">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
