areweValid
##The most tiny and easy to use jquery form validation plugin!!!
###How to use
####Install::
areweValid depends on jQuery. Include them both in end of your HTML code:
<script src="jquery.js" type="text/javascript"></script>
<script src="arewevalid.min.js" type="text/javascript"></script>And add css file in your <head>
<link rel="stylesheet" type="text/css" href="arewevalid.css"/>Package Managers
//Bower
bower install --save arewevalid
####Initializing
There are many data attributes in arewevalid for different levels of customization.But you must add two of them to make a input element work with arewevalid.Consider the following code snippet:
<form method="get">
<input type="text" data-enabled="yes" data-type="text">
</form>Or to make an element required
<form method="get">
<input type="text" data-enabled="yes" data-type="text" data-required="true">
</form>Here data-enabled="yes" and data-type="text" are manadatory.There are four values for data-type="" attribute.See below for further information.
Then in your js file add the following code snippet:
$(document).ready(function(){
$('form').areweValid();
});You can override default by passing options to plugin method.
Available options:
| Option | Type | Default | Description |
|---|---|---|---|
| max | int | 15 | maximum character limit.works with data-type="text" and data-type="number" |
| min | int | 7 | minimum character limit.works with data-type="text" and data-type="number" |
| disableButton | boolean | true | If an error is exists then it will make the submit button disabled. |
| rqMsg | string | It's required | error message for a required element |
| maxMsg | string | It's too long | error message for crossing maximum character limit |
| minMsg | string | It's too short | error message for a input that has a value shorter than it's minimum character limit |
| emailMsg | string | Please type a valid email | error message for a input that value is not a valid email |
| numMsg | string | Please type a valid number | error message for a input that has a value rather than number. |
| urlMsg | string | Please type a valid web url | error message for a input that value is not a valid web url |
Example:
<form method="get">
<input type="text" data-enabled="yes" data-type="text" data-required="true">
<input type="text" data-enabled="yes" data-type="number" >
</form>$(document).ready(function(){
$('form').areweValid({
disableButton:false,
max:10,
numMsg:"It's not a number!"
});
});If you want to customize options at the input level then you can add data attribute to that specefic input element.But not all the data attribute works with every data-type="" attribute.For better understanding purposes see the table below.
[ Note : data-type="" attribute is mandatory with a correct value ie: text,email,number,url ]
| Data type | Works with |
|---|---|
| data-type="text" | data-max="",data-min="",data-maxmsg="",data-minmsg="",data-required="",data-rqmsg="" |
| data-type="number" | data-nummsg="",data-max="",data-min="",data-maxmsg="",data-minmsg="",data-required="",data-rqmsg="" |
| data-type="email" | data-emailmsg="",data-required="",data-rqmsg="" |
| data-type="url" | data-urlmsg="",data-required="",data-rqmsg="" |
=====
What can do a specefic data attribute?
| Data attribute | Description |
|---|---|
| data-enabled="yes" | Must have attribute for every input element |
| data-type="" | It has four values.[text,number,url,email] |
| data-required="true" | makes an element required |
| data-max="" | maximum character limit |
| data-min="" | minimum character limit |
| data-maxmsg="" | error message for crossing maximum character limit |
| data-minmsg="" | error message for a input that has a value shorter than it's minimum character limit |
| data-nummsg="" | error message for a input that has a value rather than number. |
| data-emailmsg="" | error message for a input that value is not a valid email |
| data-urlmsg="" | error message for a input that value is not a valid web url |
| data-rqmsg="" | error message for a input that is required. |
Example:
<form method="get">
<input type="text" data-enable="yes" data-type="text" data-max="16" data-required="true">
<input type="email" data-enable="yes" data-type="email" data-emailmsg="Invalid email address"/>
<input type="text" data-enable="yes" data-type="email"/>
<input type="url" data-enable="yes" data-type="url" data-required="true"/>
<input type="text" data-enable="yes" data-type="url" data-required="true"/>
<input type="text" data-enable="yes" data-type="number" data-min="3" data-minmsg="Please enter at least 3 characters"/>
<input type="submit" />
</form>$(document).ready(function(){
$('form').areweValid({
max:12,
min:5,
rqMsg:"Please fill out this field",
emailMsg:"This email address is not valid"
});
});
