Requorm.js

JavaScript library for checking and validating HTML forms

View the Project on GitHub asaskevich/requorm.js

requorm.js

JavaScript library for checking and validating HTML forms. If any of the fields in the form incorrectly filled, submit buttons will be disabled. NPM version

Content


Examples

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");


Installation

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

Usage

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>

Addition checkers to DOM element

Library use attribure checkers for following tags:

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');

Default checkers


Regular expressions

Also you can use regular expressions instead checkers. Just put your regexp between slashes:

<input type="text" checkers="/^[a-zA-Z0-9]*$/">

Addition own checkers

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)">

Using CSS

If you want to mark invalid and valid fields visually, use in your CSS file following selectors:

You can change .invalid-input .valid-input to your CSS classes:

var r = new requorm('checkers', 'validField', 'invalidField');

Using Tooltips

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!].


TODO


Contribution

If you do have a contribution for the package feel free to put up a Pull Request or open Issue.