validater
description
a jquery plugin to help validating form elements, gathering form data and tiping. it is designed seajs friendly, can use as seajs module directly.
download
simple demo
demo1: show tip on focus and show ok icon
only digit:
ignored, will not be submit:
min length:1:
max length:5:
custom function validate: must equal with the first input:
test && example
git clone https://github.com/zxdong262/validater.git
cd validater
sudo npm install
node app
then visit:
- http://localhost:4321/demo1.html
- http://localhost:4321/demo2.html
- http://localhost:4321/demo1-seajs.html
how to use
include validater.min.js
<script src="jquery-1.11.1.min.js"></script>
<script src="validater.min.js"></script>
html input elements data like this
<input class="form-control" type="text" data-tip="only digital" data-reg="^[0-9]+$" name="digit" />
<input class="form-control" type="text" data-tip="only digital" data-reg="^[0-9]+$" name="name1" />
attributes list:
with * is required, other is just optional
- name *: must be unique name
- data-tip *: the tip shows when focus
- data-ignore: if(true) when call $.validater.submit(), this input will be ignored
- data-optional: if(true) when validating, it is treated as "optional"
- data-reg: regular expression string, value will be validate with the regular expression new RegExp('regular expression string')
- data-min-len: int(0~) min length validate
- data-max-len: int(1~) max length validate
- data-err-msg: the msg to show when error
- data-reg-msg: the msg to show when regular expression validate return false
- data-min-len-msg: the msg to show when min length validate return false
- data-max-len-msg: the msg to show when max length validate return false
- data-custom-msg: the msg to show when custom validate return false
- data-no-tip: if(true) will not show any validate msg
- data-no-ok-tip: if(true) will not show ok icon
- data-events: the events trigger validation, eg: 'focus blur', default : 'keyup blur change'
- data-err-wrap: the msg output positon(jquery selection string), eg: '#err-container'
note:if no related validation msg, data-tip will be used
register event for the form elements
//vars
var vr = $.validater
,inputs = $('.demo1 input, demo1 textarea') //use jquery obj as the form elements to validate
,opts = {
rules: {
name1: {
custom: function(t, opt) {
return $('[name="digit"]').val() === t.val()
}
}
,digit: {
//all available option list:
reg: /^[0-9]+$/ //regular expression validate
,minLen: 1 //min length validate
,maxLen: 5 //max length validate
,optional: false //same as data-optional="true"
,tip: 'only digit' //same as data-tip
,errMsg: 'error not ok' //same as data-err-msg
,regMsg: 'msg when not pass the regular expression validate'
,minLenMsg: 'the msg to show when min length validate return false'
,maxLenMsg: 'the msg to show when max length validate return false'
,customMsg: 'the msg to show when custom validate return false'
,ignore: true //same as data-ignore="true"
,noTip: false // same as data-no-tip="true"
,noOkTip: false // same as data-no-ok-tip="true"
,events: 'blur keyup' // same as data-events
,errWrap: '#wrap' // same as data-err-wrap
,custom: function(t, opt) {
//custom validate function
//t is the the input element juery object
//opt is the validate optons
return $('[name="digit"]').val() === t.val()
//return true or false
}
,valueFilter: function(v) {
//process the value
//param v: the input element value
return v.split('')
//return the processed value
}
}
}
}
//the option object
//then resgiste events
vr.evt(inputs, opts)
when you need gather the validate infomation and the form data
//on submit
$('.submit').click(function() {
var result = vr.submit(inputs)
/*
console.log(result) will be
{
res: 1 //the count , not pass validate
,submit: { //the data object for submiting
name1: 'input name="name1" value'
,digit: 'input name="digit" value'
}
}
*/
if(result.res) alert(result.res + ' fields has errors!')
else {
alert('all fields ok!')
$.ajax({
url: '/some-url'
,type: 'post'
,data: result.submit
,success: function(res) {
//do something
}
})
}
})
other options
//if need the onfocus show tip
vr.defaults.showTipOnfocus = true
//if need the validate ok icon
vr.defaults.showTipOnfocus = true
//custom ok icon html
vr.defaults.okHtml = '√'
add some css to format the ui, here is the example css
.vr-err,
.vr-tip {
background: #f30;
color:#fff;
padding: 0 5px;
font-size: 12px;
line-height: 22px;
height:22px;
display: inline-block;
position: relative;
margin-left: 10px;
}
.vr-ok {
display: inline-block;
vertical-align: middle;
padding: 0 5px;
color: green;
}
.vr-err:after,
.vr-tip:after {
top: 2px;
margin-top: 0;
left: -4px;
bottom: 0;
right: auto;
border-width: 9px 7px 10px 0;
border-color: transparent #f30;
content: "";
position: absolute;
border-style: solid;
display: block;
width: 0;
}
that is all