Scrupulous.js is super simple, client side, inline form validation using HTML5 attributes. Add all the standard HTML5 form attributes and call the plugin and it will automatically add inline validation with full styleable elements and class names. View the demo here.
Scrupulous.js is built around Bootstrap, using the same class name and HTML structure for simple implementation. Not using Bootstrap? No problem, just update the class names in the CSS file and with minor changes it should still work fine.
Call the $.scrupulous() plugin on the form(s) you would like to validate.
$(function(){
$('.validate-form').scrupulous();
});
Then just add standard HTML5 attributes to your form and Scrupulous takes care of the rest.
<form class="validate-form" method="post" action="/">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" title="Please Enter a Valid Email Address" required>
</div>
</form>
Note that the title of the field becomes the error message, mimmicking the default browser HTML5 validation messaging.
If an error is detected the resulting HTML is generated dynamically.
<div class="form-group has-error">
<label for="name">Name</label>
<input type="text" class="form-control invalid" id="name" name="name" title="Please Enter a Name" required>
<label class="error-message" for="name">Please Enter a Name</label>
</div>
When the form validates the following HTML is generated dynamically
<div class="form-group has-success">
<label for="name">Name</label>
<input type="text" class="form-control valid" id="name" name="name" title="Please Enter a Name" required>
</div>
There are additional validation methods that come in handy that can be controlled by data attributes.
The data-equal-to attribute value is the id of the first password field.
More properties to be added as new features are needed.
Example showing valid and invalid callbacks and setErrorMessage helper function
$('.callback-form').scrupulous({
valid: function(){
alert('Valid Callback - Submit the Form');
return true;
},
invalid: function(){
alert('Invalid Callback - Stop the Form');
return false;
},
setErrorMessage: function(el){
/** example to put custom message on inputs with type='number' **/
var input = $(el);
var message = null;
var tag = el.tagName.toLowerCase();
var type = ( tag == "input" ) ? input.attr("type").toLowerCase() : ( tag == "select" ) ? "select" : "unknown";
/** use different messages if input value is too large vs too small **/
if ( type == "number" ) {
if (typeof input.attr("max") !== 'undefined' && input.attr("max") < input.val()) {
message = "Please enter " + input.attr("max") + " or less";
}
else if (typeof input.attr("min") !== 'undefined' && input.attr("min") > input.val()) {
message = "Please enter " + input.attr("min") + " or more";
}
}
/** use setCustomValidity method built into browser to update the message **/
if ( message !== null ){
el.setCustomValidity(message);
}
}
});
Currently if the browser does not support element.checkValidity Scrupulous will silently fail. You should be using solid server side validation as a backup. It may be possible to use it in conjunction with a HTML5 form validation polyfill. Let us know if you have any luck.
Scrupulous may also be loaded with Modernizr.load as well.
Modernizr.load({
test: Modernizr.input.required,
yep: 'js/scrupulous.js',
complete: function() {
$('#my-form').scrupulous();
}
});