I tried to male a generic validation function but i think i have a problem with the lenght validatinon : the function work on the second input but not in the first, you can see that here on jsFiddle :
======> http://jsfiddle.net/RochesterFox/N2HyE/1/
The Html :
<input type="text" name="number" class="verify" conditions="requierd numeric"/>
<input type="text" name="number2" class="verify" conditions="requierd lenght:5 numeric"/>
The javascript :
function getVal(field, array){
arr = jQuery.grep(array, function (value) {
search = field;
if(value.match(search)) return true;
return false;
});
var vals = arr[0].split(':');
return vals[1];
}
$('.verify').blur(function(){
var conditions = $(this).attr('conditions').split(' ');
var state = [];
if ($.inArray('requierd', conditions) > -1){
if($(this).val() === '') state.push('invalid');
else state.push('valid');
}
else $(this).removeClass('invalid').addClass('valid');
if ($.inArray('numeric', conditions) > -1){
if($.isNumeric($(this).val()) === false) state.push('invalid');
else state.push('valid');
}
if(getVal('lenght', conditions) != ''){
if($(this).val().length < getVal('lenght', conditions)) state.push('invalid');
else state.push('valid');
}
if(($.inArray('invalid', state) > -1) === false){
$(this).removeClass('invalid').addClass('valid');
verif();
}
else{
$(this).removeClass('valid').addClass('invalid');
}
});
function verif(){
var state = 'none';
$('.verify').each(function(){
if($(this).hasClass('invalid')) state = 'invalid';
});
if(state != 'invalid'){
//VALID !
$('body').append('VALIDATED');
}
}
Additional to my comment above, i forked you’re jsfiddle with a very quick fix.
http://jsfiddle.net/mNUfG/
If you really do not want to use some existing client side validation libraries, you should clean up your code further, if you do not want to run in problems like this more often.
Also you might want to use the ‘JsLint’ Button, in jsfiddle, to find errors in your code.