Simple html & js to use a natural jQuery validation. It natively works with bootstrap css validation.
Read Valid / Error Function Override to apply your validation system
The jQuery library is in js/jq-natural-validator.js
To use it you just add class .jqValidator
as in this HTML example:
<form class="jqValidator" method="POST">
[...]
</form>
<script>
jQuery(document).ready(function($) {
$("form").jQNaturalValidator();
});
</script>
To validate your input fields you must add a data-attribute with a value (optional). You can see some typical integration in index.html.
Here the data-attributes list:
data-jqv-min-length @default 3
data-jqv-email @default true
data-jqv-not-empty @default true
data-jqv-checked @default true
There are many simple options, if you must to add some functionality, this library was created to be easy and customizable, so ... do that!
Options:
{
tpl: "bootstrap", // Bootstrap css validation class
domFields: true, // Change to false to check fields on evrey validation request
KeyPressValidation: true, // Change to false to check form only on submit
stepCheck: true, // Change to false to check every input on submit (not the first wrong)
focusOnSubmitError: true, // Change to false to prevent autoFocus on field validation error
disableSubmitBtnOnError: true, // Change to false to disable submit button if form is inValid
autoTrimCheck: true, // Change to false to disable autoTrim on validation check
spinnerEl: '', // Inject here spinner element, at submit this will be show
// Override submit Function (example: inject an ajax send function)
submitFunction: '',
// Override validtion Function (@params: el, validation_type ['submit' | 'keyPress' | 'testSubmit'])
validFieldFunction: '', // Override default bootstrap validField css with you Function
// Override error Function (@params: el, validation_type ['submit' | 'keyPress' | 'testSubmit'])
errorFieldFunction: '', // Override default bootstrap errorField css with you Function
// [data-*] get validation opts from html attributes
attrs: {
"jqv-min-length": 3,
"jqv-email": true,
"jqv-not-empty": true,
"jqv-checked": true
},
// Main regex (used with some field validation)
regex: {
email: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
}
}
To add your favourite validation system edit this plugin at base.validFieldWrapper
and base.errorFieldWrapper
or better use options validFieldFunction
and validFieldFunction
to inject your function without edit this library.
A simple custom validation example:
<script>
var validFunction = function() { alert('valid'); }
var errorFieldFunction = function() { alert('error'); }
jQuery(document).ready(function($) {
$("form.jqValidator").jQNaturalValidator({
validFieldFunction: validFunction,
errorFieldFunction: errorFieldFunction
});
});
</script>
Spinner integration example:
<script>
jQuery(document).ready(function($) {
$("form").jQNaturalValidator({
spinnerEl: $("form #spinner")
});
});
</script>
An ajax submit Function example:
<script>
jQuery(document).ready(function($) {
$("form").jQNaturalValidator({
submitFunction: function() {
$.ajax({
url: "save.php",
type: "POST",
data: {
name: $("#name").val(),
email: $("#email").val()
}
})
.success(function(result) { alert("data saved"); })
}
});
});
</script>