<?php
<!DOCTYPE html>
<html>
<head>
<title>Sky Forms Pro</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/sky-forms.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/sky-forms-ie8.css">
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<!--[if lt IE 10]>
<script src="js/jquery.placeholder.min.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/sky-forms-ie8.js"></script>
<![endif]-->
</head>
<body class="bg-cyan">
<div class="body">
<form action="" id="sky-form" class="sky-form">
<header>Available validation rules</header>
<fieldset>
<div class="row">
<section class="col col-6">
<label class="label">Required field</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="required">
</label>
</section>
<section class="col col-6">
<label class="label">Email validation</label>
<label class="input">
<i class="icon-append fa fa-envelope"></i>
<input type="email" name="email">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="label">URL validation</label>
<label class="input">
<i class="icon-append fa fa-globe"></i>
<input type="url" name="url">
</label>
</section>
<section class="col col-6">
<label class="label">Date validation</label>
<label class="input">
<i class="icon-append fa fa-calendar"></i>
<input type="text" name="date">
</label>
</section>
</div>
<div class="row">
<section class="col col-4">
<label class="label">Minimum length</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="min">
</label>
</section>
<section class="col col-4">
<label class="label">Maximum length</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="max">
</label>
</section>
<section class="col col-4">
<label class="label">Range length</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="range">
</label>
</section>
</div>
</fieldset>
<fieldset>
<div class="row">
<section class="col col-6">
<label class="label">Digits validation</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="digits">
</label>
</section>
<section class="col col-6">
<label class="label">Decimal number validation</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="number">
</label>
</section>
</div>
<div class="row">
<section class="col col-4">
<label class="label">Minimum value</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="minVal">
</label>
</section>
<section class="col col-4">
<label class="label">Maximum value</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="maxVal">
</label>
</section>
<section class="col col-4">
<label class="label">Range value</label>
<label class="input">
<i class="icon-append fa fa-asterisk"></i>
<input type="text" name="rangeVal">
</label>
</section>
</div>
</fieldset>
<footer>
<button type="submit" class="button">Submit</button>
<button type="button" class="button button-secondary" onclick="window.history.back();">Back</button>
</footer>
</form>
</div>
<script type="text/javascript">
$(function()
{
// Validation
$("#sky-form").validate(
{
// Rules for form validation
rules:
{
required:
{
required: true
},
email:
{
required: true,
email: true
},
url:
{
required: true,
url: true
},
date:
{
required: true,
date: true
},
min:
{
required: true,
minlength: 5
},
max:
{
required: true,
maxlength: 5
},
range:
{
required: true,
rangelength: [5, 10]
},
digits:
{
required: true,
digits: true
},
number:
{
required: true,
number: true
},
minVal:
{
required: true,
min: 5
},
maxVal:
{
required: true,
max: 100
},
rangeVal:
{
required: true,
range: [5, 100]
}
},
// Messages for form validation
messages:
{
required:
{
required: 'Please enter something'
},
email:
{
required: 'Please enter your email address'
},
url:
{
required: 'Please enter your URL'
},
date:
{
required: 'Please enter some date'
},
min:
{
required: 'Please enter some text'
},
max:
{
required: 'Please enter some text'
},
range:
{
required: 'Please enter some text'
},
digits:
{
required: 'Please enter some digits'
},
number:
{
required: 'Please enter some number'
},
minVal:
{
required: 'Please enter some value'
},
maxVal:
{
required: 'Please enter some value'
},
rangeVal:
{
required: 'Please enter some value'
}
},
// Do not change code below
errorPlacement: function(error, element)
{
error.insertAfter(element.parent());
}
});
});
</script>
</body>
</html>
?>