Code Monkey home page Code Monkey logo

valitron's Introduction

Valitron 0.2 beta

jQuery validation plugin for Laravel, with Twitter bootstrap markup support.

Valitron name credits goes to daylerees :)

Some news

  • Support error translation!
  • Reworked object witch should be returned by validation rule.
  • Added for replacing certain parts of messages, such as :max for max rule and so.

What can it do?

  • Obviously validate user input data using different rules.
  • Apply validation while user typing.
  • Automaticaly mark invalid fields with "error" class
  • Can grab validation rules declared in html data-validation element.

What can I do?

  • Add new validation rules.
  • Configure invalid field marking.
  • Declare error and success validation callbacks.
  • Change default options and default config.

All callbacks gets array of objects witch defines element, rule, parameters and message

Each array object contains following parameters:

  • rule - a rule applied
  • parameters - parameters for rules
  • message - the message
  • type - type to use for translation

Some examples

Text input with some rules declared for validation:

<input id="test" type="text" data-validation="required|min:2|max:30">

A JavaScript part for validation, hook a live validation, data-validation rules will be applied after 500ms cooldown then user stops typing.

$("#test").valitron('live');

Need to cache successfull of failed validation? Just pass some callbacks

$("#test").valitron('live', {
	error : function(errors, success) {	// you get an array of validation messages, errors and success
		for ( var msg in messages )
		{
			console.log(
				msg.rule,		// A rule applied
				msg.parameters,	// Rule parameters
				msg.message,	// Validation rule message, either translated or default one
			);
		}
		// this refers to input DOM element
		$(this).addClass("error");
	},
	success : function(success, error)
	{
		$(this).removeClass("error");
	},
	timeout: 1000 // timout to trigger validation in ms
}
});

If you return anything from callbacks that evolutes to true, globalError or globalSuccess will be called too

Need to validate on button click?

<input id="test" type="text" data-validation="required|min:2|max:30">
<button id="do_check" type="button">Validate!</button>
$("#do_check").on('click', function()
{
	$("#test").valitron('validate');
})

Validate and live validation support such options

  • rules: [] - rules to check, default "|" delimiter, ":" parameters, ex: max:5|min:2
  • language : 'en' - default language to use for errors, somehow should be loaded :)
  • success : null - passes jQuery element and message, function(message) {}, this refers to jquery object
  • error : null - passes jQuery element and message, function(messagae) {}, this refers to jquery object
  • beforeValidate : null - executes before validation, returned value will be used for testing!
  • afterValidate : null - executes after validation
  • valid : false - indicates that vield is valid and doesnt contain any errors
  • timeout : 500 - Timeout for live validation
  • timer: null - Timer reference
  • errors: {} - holds last validation errors( 0.2 beta )
  • messeges : {} - custom error messages, attribute_rule notation for specific error for attribute, and only ruleName for rule error ( 0.2 beta )

Whant to change default options or config?

$.valitron('options', {
	// supported options goes here
})

Changes to global config

$.valitron('config', {
	globalSuccess : function(){} // global success, this refers to jquery object, there is actual code inside functions ;)
	globalError : function(){} 	// global error, this refers to jquery object
	ruleDelimiter : "|" 		// Delimiter used to separate rules.
	ruleMethodDelimiter : ":"	// Rule and its parameter delimiter
	ruleParamDelimiter: ","		// Rule parameters delimiter
	ruleDataElement: 'validation'// html data element name witch holds validation rules
})

Valitron support all jquery selectors

All selected elements will get valitron instances, hooked callbacks will be applied on each.

Login:<input class="test" type="text" data-validation="required|min:2|max:30"><br>
Password:<input class="test" type="password" data-validation="required|min:15">
<button id="do_check" type="button">Take me to heaven!</button>
$(".test").valitron("live", {
	error: function(messeges) {
		// both input fields will have error callbacks
	}
})

Replacers

valitron's People

Contributors

taskaz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

pandahisham

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.