JavaScript library for checking and validating HTML forms
JavaScript library for checking and validating HTML forms. If any of the fields in the form incorrectly filled, submit buttons will be disabled.
Let's watch some examples!
Example 1: Input should be not empty
Type any text in input field and you will see green border on it! Also you will see enabled button!
Used checkers: notEmpty
Example 2: Input length should be between six and ten
Type any text with length in range [6..10] and you will see green border on it! Also you will see enabled button!
Used checkers: minLength(6); maxLength(10)
Example 3: Input should be alphabetic in one case and numeric in second
Type any letter in first field and any numeric character in second field and you will see green border on it! Also you will see enabled button!
Used checkers: alpha; numeric
Example 4: Input should be valid e-mail with minimal length ten characters
Type username@domain.com
and you will see green border on it! Also you will see enabled button!
Used checkers: email; minLength(10)
Example 5: Input should be equal to "Hello"
Type Hello
and you will see green border on it! Also you will see enabled button!
Used checkers: equal(Hello)
Spaces, the quotes are not yet supported!
Example 6: Input should start with "Ex" in one case, match to ^[a-zA-Z]*[0-9]+$ regexp in second and has five lines in third(Custom checkers)
Here we use own checkers. Type Example or Excellent or any string with prefix Ex
in input field and any multiline text(but with five lines) in textarea and you will see green border on it! Also you will see enabled button!
Used checkers: startWith(Ex); lineCount(5); /^[a-zA-Z]*[0-9]+$/
var r = new requorm(); r.initDefCheckers(); r.addChecker("startWith", function(element, args) { return element.value.indexOf(args[0]) == 0; }); r.addChecker("lineCount", function(element, args) { return element.value.split("\n").length == parseInt(args[0]); }); r.setTooltipUsing(true); r.setTooltip("lineCount", "Illegal line count!"); r.apply(".ex-6");
You can download library directly from GitHub by one of the links on your left.
Alternatively, you can use npm or bower:
$ npm install requorm.js
or:
$ bower install requorm.js
Okay, examples are awesome, but what about usage? First 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:
input
textarea
select
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');
min
max
input
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]
.button
You can change .invalid-input .valid-input
to 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!]
.
If you do have a contribution for the package feel free to put up a Pull Request or open Issue.