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.

@github

download

download from github

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:

submit

test && example

git clone https://github.com/zxdong262/validater.git
cd validater
sudo npm install
node app

then visit:

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

//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

html5beta.com