Supporting Skeleton framework
← Examples
Below is a step by step instruction showing how to validate the forms which uses the Skeleton framework.
Downloading the files
- Create a file named
skeleton.jswith the following content:
/**
* This class supports validating Skeleton framework (http://getskeleton.com/)
*/
(function($) {
FormValidation.Framework.Skeleton = function(element, options) {
options = $.extend(true, {
button: {
selector: '[type="submit"]:not([formnovalidate])',
// The class of disabled button
disabled: 'fv-button-disabled'
},
err: {
clazz: 'fv-help-block',
parent: '^.*columns.*$'
},
// Skeleton doesn't support feedback icon
icon: {
valid: null,
invalid: null,
validating: null,
feedback: 'fv-control-feedback'
},
row: {
selector: '.row',
valid: 'fv-has-success',
invalid: 'fv-has-error',
feedback: 'fv-has-feedback'
}
}, options);
FormValidation.Base.apply(this, [element, options]);
};
FormValidation.Framework.Skeleton.prototype = $.extend({}, FormValidation.Base.prototype, {
/**
* Specific framework might need to adjust the icon position
*
* @param {jQuery} $field The field element
* @param {jQuery} $icon The icon element
*/
_fixIcon: function($field, $icon) {
var ns = this._namespace,
type = $field.attr('type'),
field = $field.attr('data-' + ns + '-field'),
$row = $field.closest(this.options.fields[field].row || this.options.row.selector),
$parent = $field.parent();
// Place it after the container of checkbox/radio
// so when clicking the icon, it doesn't effect to the checkbox/radio element
if ('checkbox' === type || 'radio' === type) {
if ($parent.is('label')) {
$parent.addClass('fv-' + type);
$icon.insertAfter($parent);
}
}
var $labels = $row.find('label');
if ($labels.length === 0 || $labels.eq(0).is($parent)) {
$icon.addClass('fv-icon-no-label');
}
}
});
}(jQuery));- Create a file named
skeleton.csswith the following content:
.fv-form-skeleton .row {
margin-bottom: 15px;
}
.fv-form-skeleton input,
.fv-form-skeleton select,
.fv-form-skeleton textarea {
margin-bottom: 0;
}
.fv-form-skeleton .fv-control-feedback {
top: 0;
width: 38px;
height: 38px;
line-height: 38px;
}
.fv-form-skeleton label~.fv-control-feedback {
top: 29px;
}
.fv-form-skeleton label>.label-body {
padding-top: 7px;
}
/* Stacked form without label */
.fv-form-skeleton label~.fv-control-feedback.fv-icon-no-label {
top: 0;
}
/* Horizontal form */
.fv-form-horizontal.fv-form-skeleton label.fv-checkbox~.fv-control-feedback,
.fv-form-horizontal.fv-form-skeleton label.fv-radio~.fv-control-feedback {
top: 0;
}
.fv-form-skeleton .fv-help-block {
margin-top: 5px;
}
/* You can customize the color of success and error classes */
.fv-form-skeleton .fv-has-error label,
.fv-form-skeleton .fv-has-error .fv-help-block,
.fv-form-skeleton .fv-has-error .fv-control-feedback {
color: red;
}
.fv-form-skeleton .fv-has-success label,
.fv-form-skeleton .fv-has-success .fv-control-feedback {
color: green;
}
/* You can customize the disabled button styles */
.fv-form-skeleton .fv-button-disabled {
cursor: not-allowed;
opacity: .65;
}You should place skeleton.js and skeleton.css in formvalidation/dist/js/framework and formvalidation/dist/css directories respectively.
Including the library
<!-- Skeleton framework -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<!-- Optional: Include the Font Awesome for using some icons -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/skeleton.css">
<!-- jQuery v1.9.1 or higher -->
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>
<!-- FormValidation plugin and the class supports validating Skeleton form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/skeleton.js"></script>Calling the plugin
When calling .formValidation(), you need to set the framework option:
$(form).formValidation({
framework: 'skeleton',
...
}); Some of forms use the row option to support multiple fields in the same row container
Stacked form
<form id="signupForm" method="post">
<div class="row">
<div class="six columns">
<label>First name</label>
<input name="firstName" type="text" class="u-full-width" />
</div>
<div class="six columns">
<label>Last name</label>
<input name="lastName" type="text" class="u-full-width" />
</div>
</div>
<div class="row">
<div class="four columns">
<label>Username</label>
<input name="username" type="text" class="u-full-width" />
</div>
<div class="four columns">
<label>Email address</label>
<input name="email" type="text" class="u-full-width" />
</div>
<div class="four columns">
<label>Password</label>
<input name="password" type="password" class="u-full-width" />
</div>
</div>
<div class="row">
<label>Gender</label>
<label>
<input name="gender" type="radio" value="male" />
<span class="label-body">Male</span>
</label>
<label>
<input name="gender" type="radio" value="female" />
<span class="label-body">Female</span>
</label>
<label>
<input name="gender" type="radio" value="other" />
<span class="label-body">Other</span>
</label>
</div>
<div class="row">
<label>
<span id="captchaOperation"></span>
<span class="label-body">
<input type="text" name="captcha" class="u-full-width" />
</span>
</label>
</div>
<div class="row">
<label>
<input name="agree" type="checkbox" />
<span class="label-body">Agree with the terms and conditions</span>
</label>
</div>
<div class="row">
<button type="submit" class="button-primary">Sign up</button>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#signupForm').formValidation({
framework: 'skeleton',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
feedback: 'fv-control-feedback'
},
fields: {
firstName: {
row: '.six',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.six',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
username: {
row: '.four',
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
row: '.four',
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
row: '.four',
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script>Stacked form without labels
<form id="signinForm" method="post">
<div class="row">
<input name="username" type="text" class="u-full-width" placeholder="Username" />
</div>
<div class="row">
<input name="password" type="password" class="u-full-width" placeholder="Username" />
</div>
<div class="row">
<button type="submit" class="button-primary">Sign in</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#signinForm').formValidation({
framework: 'skeleton',
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
feedback: 'fv-control-feedback'
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: 'The username can only consist of alphabetical, number and underscore'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});
</script>Horizontal form
<form id="signupForm" class="fv-form-horizontal" method="post">
<div class="row">
<label class="three columns">Full name</label>
<div class="four columns">
<input name="firstName" type="text" class="u-full-width" placeholder="First name" />
</div>
<div class="four columns">
<input name="lastName" type="text" class="u-full-width" placeholder="Last name" />
</div>
</div>
<div class="row">
<label class="three columns">Username</label>
<div class="six columns">
<input name="username" type="text" class="u-full-width" />
</div>
</div>
<div class="row">
<label class="three columns">Email address</label>
<div class="six columns">
<input name="email" type="text" class="u-full-width" />
</div>
</div>
<div class="row">
<label class="three columns">Password</label>
<div class="six columns">
<input name="password" type="password" class="u-full-width" />
</div>
</div>
<div class="row">
<label class="three columns">Gender</label>
<div class="six columns">
<label>
<input name="gender" type="radio" value="male" />
<span class="label-body">Male</span>
</label>
<label>
<input name="gender" type="radio" value="female" />
<span class="label-body">Female</span>
</label>
<label>
<input name="gender" type="radio" value="other" />
<span class="label-body">Other</span>
</label>
</div>
</div>
<div class="row">
<label class="three columns">
<span id="captchaOperation"></span>
</label>
<div class="two columns">
<input type="text" name="captcha" class="u-full-width" />
</div>
</div>
<div class="row">
<label class="three columns"></label>
<div class="eight columns">
<label>
<input name="agree" type="checkbox" />
<span class="label-body">Agree with the terms and conditions</span>
</label>
</div>
</div>
<div class="row">
<label class="three columns"></label>
<div class="nine columns">
<button type="submit" class="button-primary">Sign up</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#signupForm').formValidation({
framework: 'skeleton',
row: {
selector: '.columns'
},
icon: {
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
feedback: 'fv-control-feedback'
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
agree: {
validators: {
notEmpty: {
message: 'You must agree with the terms and conditions'
}
}
}
}
});
});
</script>