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
| Option | Values | Default | Description |
|---|---|---|---|
| type | “email”, “url”, “date”, “time”, “phone”, “float”, “int”, “group”, “extension” or “custom” | The type of value that is expected | |
| required | Bool | false | Is this filed required or can it be left empty? |
| error | String | The message shown on error | |
| min | Int, Float or String | The minimum value (Int and Float) or the minimum length (String) | |
| max | Int, Float or String | The maximum value (Int and Float) or the maximum length (String) | |
| length | Int | An exact length | |
| bigger | DOM element | Has to be bigger than this DOM elements value | |
| smaller | DOM element | Has to be smaller than this DOM elements value | |
| older | DOM element | Has to be older than this DOM elements value | |
| younger | DOM element | Has to be younger than this DOM elements value | |
| longer | DOM element | Has to be longer than this DOM elements value | |
| shorter | DOM element | Has to be shorter than this DOM elements value | |
| strength | Int 1-100 | The minimum password strength | |
| same | DOM element | Has to be the same as this DOM elements value | |
| different | DOM element | Has to be different than this DOM elements value | |
| options | Strings (comma separated) | Different options, for example extensions if type file | |
| checkfunction | Function name | The name of the function that should check the form value |
Events
Examples
Password:
Check if the password is secure or not (min. strength is 50 of 100):
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:
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):
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:
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:
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:
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:
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:
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):
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):
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 ]