Flexible Validation Plugin For jQuery - Pliant

Pliant is a small jQuery validation plugin that allows easy extending/overriding of rules, as well as defining field validation by html comments.

Features:

• Central rule definitions.
• Field specific rule definitions.
• Rule inheritance, and overriding.
• Dynamic rule messages at validate time.
• Validation on field change.
• Field validation chaining, so validating one field, can trigger rule validation on others.
• Add or remove fields/rules after init.
• Enable or disable fields/rules after init.
• Set fields valid state during or after init.
• Define rules per field using HTML comments (plugin).
• Control field/rule message locations globally, or on a per field/rule instance.
• Control what triggers total validation, and what scope.
• Halt validation on first invalid rule per field, or validate all rules per field.
• Ignore hidden/disabled fields during validation.
• Customize the element type and/or CSS for fields, messages, message containers, and message wrappers.
• Allows multiple event handlers to bind to events for field validation, form validation, invalid field focus, and field added.
• Control field validation on change globally, or per field/rule based on a bool or a function result.
• Extensible via custom plugins.

You might also like:

• Powerful jQuery Form Validation Plugin - Validation Engine
• Simple Form Validation Plugin with HTML5 and jQuery
• jQuery Plugin for Easy HTML5 Form Validation - Validatr
• HTML5 Form Validation Plugin For jQuery - formvalidate
• Lightweight JS Form Validation Library - validate
• jqBootstrapValidation - Validation Framework For Bootstrap Form
• nextVal - jQuery Form Validation Plugin
• Sliding Form Validation Plugin

How to use it:

1.  Include necessary js files

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="..\jquery.pliant.js"></script>
<script type="text/javascript" src="..\plugins\pl.decorator.js"></script>
<script type="text/javascript" src="..\plugins\pl.inputhint.js"></script>
<script type="text/javascript" src="..\plugins\pl.inputsuccess.js"></script>
<script type="text/javascript" src="..\plugins\pl.htmlrules.js"></script>
<script type="text/javascript" src="..\plugins\pl.inputmask.js"></script>

2. Markup

<form class="cmxform" id="signupForm" method="get" action="">
<div>
<label for="username">Username</label>
<div>
<input id="username" name="username" type="text">
</div>
</div>
<div>
<div id="passwordContainer"> </div>
<label for="password">Password</label>
<div>
<input id="password" name="password" type="password" hintText="Password" />
</div>
</div>
<div>
<label for="date" id="dateLabel">Date</label>
<div>
<input id="date" name="date" type="text" />
</div>
</div>
<div>
<label for="confirm_password">Confirm password</label>
<div> 
<!-- { "field": "#confirm_password", "rules": { "required" : {} } } --> 
<!-- { "field": "#confirm_password", "rules": { "length": { "min": 2, "max": 10, "message": "Cannot be longer than 10 characters." } } } -->
<input id="confirm_password" name="confirm_password" type="password" />
</div>
</div>
<div>
<label for="FirstName">First Name (Uses container for error!)</label>
<div id="firstNameError"></div>
<div>
<input id="FirstName" name="FirstName" type="text" />
</div>
</div>
<div id="test"> In 3 seconds, this will be replaced with a field and some HTML rules. </div>
<input class="submit" type="submit" value="Cancel"/>
<input class="submit" type="submit" value="Submit"/>
</form>

3. Call the plugin

<script type="text/javascript">
$(function() {
$.pliantPlugin('test', {
options: {
test: 'derp'
},
_create: function() {
}
});
var password = $('#password');
datePick = $('#date'),
username = $('#username'),
password = $('#password'),
firstname = $('#FirstName'),
val = $('#signupForm').pliant({
appendRulesToFieldClass: true,
rules: {
dateformat: {
message: 'Invalid Date',
validate: function(o) {
return (/^\d{1,2}\/\d{1,2}\/\d{2,4}$/i.test(this.val()));
}
},
mylength: {
inherit: 'length',
min: 10, max: 20,
message: 'Between 10 and 20 characters.'
}
},
plugins: {
htmlrules: {
parseOnInit: true
},
decorator: {
required: {
content: '<span style="color: red;">*</span>',
how: 'prepend',
sync: true,
what: function() {
return this.parents('div:eq(1)').find('label:first');
}
}
},
inputmask: {
emptyMaskClass: 'plHint',
resetIncompleteMasks: false,
masks: {
date: { maskOnFocus: false }
}
},
inputsuccess: {},
inputhint: {}
},
fields: [
{
field: password,
successMessage: 'Test',
rules: {
required:{},
length: {
min: 5,
max: 10,
message: 'Between 5-10 character.'
}
}
},
{
field: firstname,
enabled: false,
rules: {
required:{
message: 'Required Name!',
container: $('#firstNameError')
},
mylength: {
max: 100
}
}
},
{
hintText: 'sup',
field: username,
// chain: [password, datePick],
// chain: { field: password, rules: ['length'] },
// chain: password,
// chain: [{
// field: password,
// rules: [ 'length' ]
// }, {
// field: firstname
// }],
rules: {
required: {},
mylength: {
message: 'Must be between 10 and 20 characters.'
}
},
test: {
sup: 'test'
}

},
{
field: datePick,
mask: 'date',
rules: {
required: {},
dateformat: {}
}
}
],
focusFirstInvalidField: true,
reconcileFieldOrder: true
});
datePick.datepicker({
showOn: "button",
buttonImage: "calendar.gif",
			buttonImageOnly: true
});
setTimeout(function() {
var test = $('#test');
test.html('<label for="dynamicField">Dynamic Field</label><div><!-- { "field": "#dynamicField", "rules": { "required":{}} } --><input id="dynamicField" name="dynamicField" type="text" /></div>');
val.AddMarkupRules();
}, 3000);
});
</script>

Change Log:

v2.0.7 (2013-05-31)

• Added ability to assign a function to the chain property of a field.

v2.0.6 (2013-05-31)

• Issue #15 by amurf: Allow "field" to contain an array of fields.
• Added bower.json definition.
• Fixed rule option inheritance bug due to bad comparison treating 0 as null.

v2.0.5 (2013-03-14)

• Added "for" attribute to validation messages if they're label elements.

v2.0.4 (2013-03-07)

• Version bump due to inputmask plugin changes.

---

This awesome jQuery plugin is developed by PortableSheep. For more Advanced Usages, please check the demo page or visit the official website.