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.
#Setup
scrupulous.css: you will need to include the scrupulous.css which adds some additional styling to the form elements.
jQuery: Scrupulous should work with most newer versions of jQuery, Have not tested how far back it is supported
scrupulous.js: Runs a jQuery plugin.
Call the $.scrupulous() plugin on the form(s) you would like to validate.
Note that the title of the field becomes the error message, mimmicking the default browser HTML5 validation messaging.
##HTML with Errors
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>
##Valid HTML
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>
#Additional Validation Methods
There are additional validation methods that come in handy that can be controlled by data attributes.
data-equal-to:
ID of an element to check whether the values of the two elements are equal. Example is password fields where you want to make sure that both passwords match.
###Example
The data-equal-to attribute value is the id of the first password field.
Password
Repeat Password
#Optional Properties
More properties to be added as new features are needed.
valid:
A Callback if the form is valid. Must return true or false. Helpful if you are relying on another service to validate the form after the scrupulous script has determined the form. Examples: Credit Card Validation, Address Verification, Username Verification.
invalid:
Callback if the form is invalid. Always prevents form submission. Helpful if you need added functionality such as showing a global message above the form.
setErrorMessage:
Helper function used to set up custom error messaging. Helpful for cases where special messaging is needed for specific error modes.
errorClassName:
Default: 'error-message'. Customize the class name of error messages, useful when integrating into an existing project that does not use Bootstrap.
parentClassName:
Default: 'form-group'. Customize the class name of the parent container of the form element, useful when integrating into an existing project that does not use Bootstrap.
defaultErrorMessage:
Default: 'This field has an error'. Message display in the error label if no title tag is provided on the input element with an error.
###Example
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);
}
}
});
#Legacy Browser Support
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.
##Modernizr.load Example
Scrupulous may also be loaded with Modernizr.load as well.
Scrupulous.js is super simple, client side, inline form validation using HTML5 attributes.
The npm package scrupulous receives a total of 11 weekly downloads. As such, scrupulous popularity was classified as not popular.
We found that scrupulous demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.It has 1 open source maintainer collaborating on the project.
Last updated on 29 Mar 2021
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.