jquery.formvalid v1.0.4

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:

Methods

Tests

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

License

This plugin is available under the MIT license.