easy form validation based on data-attributes
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
dest
src
Gulpfile.js
README.md
Untitled Diagram.xml
package.json

README.md

##Formdata-

Simple in use form validation, based on data- attributes

###Getting started 1). include to your project next files:

<!-- load jQuery from CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Form data plugin -->
<script type="text/javascript" src="../dest/formData.min.js"></script>

2). Add to your form classname formdata and set to input validation rules:

<form action="/" method="post" class="formdata">
    <div class="form-row">
        <label> Username </label>
        <input  data-valid="range|2-10" type="text" name="name">
    </div>
    <div class="form-row">
        <label> Email </label>
        <input data-valid="email" type="text" name="email">
    </div>
    <div class="form-row">
        <label> Password </label>
        <input data-valid="min|6" type="text" name="min">
    </div>
    <button>Send</button>
</form>

3). Reload page. Plugin was automatically initialized for all forms which contains class formdata.

Validation rules

<input data-valid="" data-message="" type="text" name="email">

// simple checking to empty field
data-valid

// email
data-valid="email"

// min chars
data-valid="min|2"

// max chars
data-valid="max|10"

// range chars
data-valid="range|2|10"

Base Options

{
	keyup: false,             // validate field on keyuo event  
	blur: true,               // validate field when user focus out from field
	validDataAttr : 'valid',  // validate data- attribute, by defaul "data-valid"
	classSuccess : 'success', // add class when field is valid
	classError : 'error',     // add class when field invalid
	tpl : {                   // error template view
	    error : '<span class="form-error">{message}</span>'
	},
	preventSubmit : false,    // if form is valid, prevent submit it
	onError : null,           // execute every time when form submiting with invalid data
	onSuccess : null          // if form fill correctly, execute this function
}

Also you can override base options, insert following code outside jQuery DOM ready function:

FormData.setup({
    preventSubmit : true,
    onSuccess : function(form) {
        // ajax query or other operation
        
        form.slideUp(function() {
            form.after('<p>Thank you for register.</p>');
        });
    }
});