Tweet



 
A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don’t have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don’t have to check out dozens of plugins, learn how to use them, only to find out they don’t work in a specific browser. And even if jKit doesn’t have that one feature you need right now, jKit is fully extendable with plugins and command replacements, all that and your API always stays the same.

Hi, stranger

jKit is growing almost daily, if you don’t find what you need, let us know with a post on the community forum or our social pages. Hey, who knows, maybe it’s already on our ToDo list.

Content Summary

jKit Button

If you like jKit, use and want to support the project, here’s a small button you can use to link to the jKit website.

Btw, if you did something really nice with jKit, send us a link to your work and if we like it, we would sure love to feature it.

Validate command

Validate form values in many different ways.

Basic Usage (HTML)

data-jkit="[validate:required=true;type=email]"

Advanced Init (JavaScript)

// Currently this command can't be initialized with JavaScript because of it's form command dependency

Options

OptionValuesDefaultDescription
type“email”, “url”, “date”, “time”, “phone”, “float”, “int”, “group”, “extension” or “custom”The type of value that is expected
requiredBoolfalseIs this filed required or can it be left empty?
errorStringThe message shown on error
minInt, Float or StringThe minimum value (Int and Float) or the minimum length (String)
maxInt, Float or StringThe maximum value (Int and Float) or the maximum length (String)
lengthIntAn exact length
biggerDOM elementHas to be bigger than this DOM elements value
smallerDOM elementHas to be smaller than this DOM elements value
olderDOM elementHas to be older than this DOM elements value
youngerDOM elementHas to be younger than this DOM elements value
longerDOM elementHas to be longer than this DOM elements value
shorterDOM elementHas to be shorter than this DOM elements value
strengthInt 1-100The minimum password strength
sameDOM elementHas to be the same as this DOM elements value
differentDOM elementHas to be different than this DOM elements value
optionsStrings (comma separated)Different options, for example extensions if type file
checkfunctionFunction nameThe name of the function that should check the form value

Events

This command has no events.

Examples

Password:

Check if the password is secure or not (min. strength is 50 of 100):

Password:
Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	Password: <input name="password" type="password" data-jkit="[validate:required=true;strength=50;error=Please enter a secure password]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

Password repeat:

Check if the second password is the same as the first:

Password:
Repeat:
Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	Password: <input name="password" type="password" id="password" data-jkit="[validate:required=true;strength=50;error=Please enter a secure password]">
	<br />Repeat: <input name="passwordtest" type="password" data-jkit="[validate:required=true;same=#password;error=The two passwords don't match, please try again]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

Telephon number check:

Check if the input is a telephone number (Currently supported formats: +41 78 450 45 21 or 078 450 45 21):

Tel.
Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	Tel. <input name="phone" data-jkit="[validate:type=phone;required=true;error=Please enter a valid phone number]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

Email check:

Check if the entered data is a valid email address:

Email:
Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	Email: <input name="email" data-jkit="[validate:type=email;required=true;error=Please enter a valid email address]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

URL check:

Check if the entered data is a valid URL:

Homepage:
Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	Homepage: <input name="homepage" data-jkit="[validate:type=url;error=This isn't a valid URL]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

File extension check:

Check if the upload file has an extension of jpg, jpeg or gif:

Image:
Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	Image: <input name="avatar" type="file" data-jkit="[validate:type=extension;options=jpg,jpeg,gif;error=Please choose a valid image format]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

Radio group check:

Check if the radio group has one option checked:

Milk
Butter
Cheese

Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	<div id="radiogroup" data-jkit="[validate:type=group;name=group1;error=Please choose one option]">
		<input type="radio" id="group1_milk" name="group1" value="Milk"> Milk<br>
		<input type="radio" id="group1_butter" name="group1" value="Butter"> Butter<br>
		<input type="radio" id="group1_cheese" name="group1" value="Cheese"> Cheese
	</div>
	<br /><input name="send" type="submit" value="Submit" />
</form>

Checkbox count:

Check if at least one option, but not more than two are checked:

Milk
Butter
Salt
Cheese

Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	<div id="checkgroup" data-jkit="[validate:type=group;min=1;max=2;error=Please choose at least one option, but not more than two]">
		<input type="checkbox" id="group2_milk" name="group2_milk" value="Milk"> Milk<br>
		<input type="checkbox" id="group2_butter" name="group2_butter" value="Butter"> Butter<br>
		<input type="checkbox" id="group2_salt" name="group2_salt" value="Salt"> Salt<br>
		<input type="checkbox" id="group2_cheese" name="group2_cheese" value="Cheese"> Cheese
	</div>
	<br /><input name="send" type="submit" value="Submit" />
</form>

Date format check:

Check if the input value is a valid date (currently supported format: 21.04.12):

Date:
Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	Date: <input name="mydate" data-jkit="[validate:type=date;required=true;error=Please add a valid date]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

Time format check:

Check if input contains a valid time (currently supported format: 15:01):

Time:
Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	Time: <input name="mytime" data-jkit="[validate:type=time;required=true;error=Please add a time]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

Integer check:

Check if the entered value is an integer above zero:


Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	<input name="myint" data-jkit="[validate:type=int;min=1;required=true;error=Please add a valid positiv Integer above zero]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

Float check:

Check if the entered value is a float between 1.0 and 2.5:


Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	<input name="myfloat" data-jkit="[validate:type=float;min=1;max=2.5;required=true;error=Please enter a float between 1 and 2.5]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

String length check:

Check if the entered string has exactly six characters:


Source:
<form method="post" action="?" data-jkit="[form:validateonly=true]">
	<input name="length" data-jkit="[validate:length=6;error=Please enter exactly six characters]">
	<br /><input name="send" type="submit" value="Submit" />
</form>

Replacements

There are currently no replacements for this command.

[ Learn more about replacements ]

 

Discussions

Do you have questions or do you want to suggest new features? Than head over to our new community:

[ jKit Community ]