formValid jQuery Plugin

Demo & Examples

https://mrygielski.github.io/jquery.formValid/

Demo 1 - A simple example of use - https://mrygielski.github.io/jquery.formValid/examples/demo1.html
Demo 2 - Modifying the change method - https://mrygielski.github.io/jquery.formValid/examples/demo2.html
Demo 3 - Defining your own regex - https://mrygielski.github.io/jquery.formValid/examples/demo3.html

Usage

<form method="post" id="form">
    <div class="row">
        <div class="col-md-12">
            <input type="text" id="labelLogin" class="form-control" data-field="login">
            <label for="labelLogin">Login (email) *</label>
            <div class="valid-message"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <input type="password" id="labelPassword" class="form-control" data-field="password">
            <label for="labelSurname">Password *</label>
            <div class="valid-message"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary" type="submit">LOGIN</button>
        </div>
    </div>
</form>

Each field must have an attribute data-field.

Include jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Include plugin’s CSS and JS:

<link rel="stylesheet" href="src/jquery.formValid.csss">
<script src="src/jquery.formValid.js"></script>

Call the plugin:

/* Init form fields */
var form = $('#form').formValid({
    fields: {
        "login": {
            "required": true, 
            "tests": [
                {
                    "type": "null", 
                    "message": "Not entered login"
                },
                {
                    "type": "email", 
                    "message": "Your email is incorrect"
                }
            ]
        },
        "password": {
            "required": true,
            "tests": [
                {
                    "type": "null", 
                    "message": "Not entered password"
                }
            ]
        }
    }
});

/* Validates the field after the change */
form.keypress(300);
$('button[type="submit"]').click(function() {
    // Validation test  
    form.test();
    if (form.errors() == 0) {
        alert('Ok');
    }
    return false;
});

Options

Here’s a list of available settings.

$('#form').formValid({
    fields: {
        "field_name": {
            "required": true,
            "tests": [
                {
                    "type": "null",
                    "message": "..."
                },
                ...
            ],
            "change": function() {
                ...
            }
        },
        ...
    }
});

Option fields is an array containing information about all fields. The first part of the array must have a name that matches the attribute data-field assigned to the field in the html code.

Field options:

Attribute	Type	Default	Description
required	boolean	false	Determines whether the field should be required when checking. Possible values: true, false
tests	Array	-	Specifies a list of validation tests for the field. The table must be based on the type and message parameters. type specifies the type of test, message message that should appear when the field value fails the test.
change	Method	-	It allows you to embed your own code that will be called when the field value changes.

Methods

Name	Return	Params	Description
test	-	-	Performs a validation test of all defined fields.
keypress	-	timeout:Integer	Carries out a validation test for the modified field after a specific timeout value.
errors	Number	-	Returns information in the form of a number if the form has validation errors.

Tests

Name	Description
null	Checks whether the value is empty.
email	Checks the correctness of the email address.
number	Checks whether the value is a number.
letters	Checks whether the value is text.
phone	Checks the correctness of the telephone number.
postcode	Checks the correctness of the postal code (Poland).

You can also use the regex parameter instead of the test name, so you can define your own regex. Example:

"tests": [
    {
        "regex": "^[A-Z]+$", 
        "message": "Only upper-case letter"
    }
]

Installation

You can install jquery.formValid by using Bower.

bower install jquery.formValid

Or you can install it through npm:

npm install --save jquery.formvalid

Create distribution version

npm install
./gulp

Changelog

Version	Date	Change
1.0.1	2018-04-28	Addition of own regex definitions

License

This plugin is available under the MIT license.