JavaScript library for checking and validating HTML forms. If any of the fields in the form incorrectly filled, submit buttons will be disabled.
- Examples
- Installation
- Usage
- Addition checkers to DOM element
- Default checkers
- Regular Expressions
- Addition own checkers
- Using CSS
- Using Tooltips
- Contribution
Watch examples here
You can download library directly from GitHub. Alternatively, you can use npm or bower:
$ npm install requorm.js
$ bower install requorm.jsFirst of all, include requorm.js (or minified requorm.min.js) to your HTML file:
<head>
<meta charset="UTF-8">
...
<link rel="stylesheet" type="text/css" href="requorm.css">
<script src="requorm.js"></script>
</head>Create any form with some class name:
<form class="myform">
<input type="text" placeholder="Name">
<input type="text" placeholder="Email">
<input type="submit" class="button" value="Submit">
</form>Init library, init default checkers and(or) add own checkers and apply to our form with class name "myform":
<script>
var r = new requorm()
r.initDefCheckers()
// Here we can add own checkers
// Here we can add own tooltips
// After all we can call "apply" method
r.apply(".myform")
</script>Library use attribure checkers for following tags:
inputtextareaselect
For example:
<input type="text" checkers="notEmpty">If the attribute is not specified, element will be ignored. One element can have multiple checkers:
<input type="text" checkers="notEmpty; email()">Checkers in attribute are separated by semicolon. If checker recieve any const arguments, you can point them like this:
<input type="text" checkers="minLength(8); maxLength(32);">
<input type="text" checkers="length(8, 32)">
<input type="text" checkers="equal(abacaba)">Note, that list of arguments 10, 1.0f, true, abc abc will be parsed as array of strings: ["10", "1.0f", "true", "abc abc"]
You can change used attribute by passing new attribute value to constructor:
var r = new requorm('same-attribute');- notEmpty - check, that field has any input
- minLength(min) - check, that field input has length greater or equal to
min - maxLength(max) - check, that field input has length less or equal to
max - equal(input) - check, that field input is equal to
input - alpha - check, that field input has only alphabetic characters
- numeric - check, that field input has only numeric characters
- email - check, that field input has valid e-mail form
- len(min, max) - check, that field input has length between
minandmax - alphanum - check, that field input has only alphabetic and numeric characters
Also you can use regular expressions instead checkers. Just put your regexp between slashes:
<input type="text" checkers="/^[a-zA-Z0-9]*$/">For creating new checker, call requorm.addChecker(name, func), where name is name of checker and func is function, that take DOM element and array of arguments and return true|false. Following code create new checker with name equal:
var r = new requorm()
r.addChecker("equal", function(element, args) {
return (args.length > 0) && (element.value == args[0])
})After it you can use checker in html:
<input type="text" checkers="equal(abacaba)">If you want to mark invalid and valid fields visually, use in your CSS file following selectors:
.invalid-input.valid-input.button[disabled].buttonYou can change.invalid-input .valid-inputto your CSS classes:
var r = new requorm('checkers', 'validField', 'invalidField');You can use tooltips for invalid fields. First of all, include all necessary jQuery and Bootstrap files. After it include plugin Bootstrap Tooltips. Tell the library that you want to use tooltips:
var r = new requorm();
...
r.setTooltipUsing(true); // By default this flag set to false
...
r.apply(".myform");Note: Call setTooltipUsing always before apply, otherwise there is no effect!
You can include all necessary files by this snippet (I use it in my examples):
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>By default tooltip message looks like:
[CheckerName 1 that throw error]
[CheckerName 2 that throw error]
...
[CheckerName N that throw error]
You can make it looks better by using function setTooltip (checkerName, tooltipMessage).
Note: Call setTooltip always before apply, otherwise there is no effect!
After execution this code:
var r = new requorm();
...
r.setTooltipUsing(true);
r.setTooltip("email", "Value is not valid email!");
...
r.apply(".myform");our tooltip for checker email will be look like [Value is not valid email!].
- More checkers
- Unit tests
- Documentation
- Pretty argument parser
- Your ideas?
If you do have a contribution for the package feel free to put up a Pull Request or open Issue.
