File: /home/imensosw/www/imenso.co/demo/zuruuna/administrator/templates/form-validation.liquid
{% layout 'layout' %}
{% block title %}Form Validation{% endblock %}
{% block breadcrumb %}
<li><a href="index.php">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 & 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 %}