formValid jQuery Plugin
Demo & Examples
https://mrygielski.github.io/jquery.formValid/
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.formValidOr 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.
