This is actually an old script i made about two years ago. I got the idea form the style classes combining. I thought it would bi nice to have ability to combine some common rules like classes. Instead of class that is used for styles i added new attribute "valid" to each form element that have to be validated. Background colour has shown to be the best choice for error indicator (.fail class), because border style can't be applied to all form element at least in old browsers (like IE).
VALIDATE FUNCTION:
function validate(form) {
var send = true;
var f,fl,vl,vll,op,opl,pat;
for(f = 0, fl = form.length; f < fl; f++) {
if(form[f].className.match('fail')) form[f].className = form[f].className.replace(/fail+/gi,'');
if(form[f].type=='checkbox') form[f].parentNode.className = form[f].parentNode.className.replace(/fail+/gi,'');
if(form[f].getAttribute('valid')) {
var valid = form[f].getAttribute('valid').split(" ");
for(vl = 0, vll = valid.length; vl < vll; vl++) {
var check = valid[vl].split("-");
switch(check[0]) {
case 'req': if(!form[f].value.length) { form[f].className +=' fail'; send = false; } break;
case 'minlen': if(form[f].value.length < check[1]) { form[f].className +=' fail'; send = false; } break;
case 'maxlen': if(form[f].value.length > check[1]) { form[f].className +=' fail'; send = false; } break;
...rules
}
}
}
}
return send;
}
On submit event triggers validate function which goes trough all form elements and checks valid attribute. If one or more rules are not true, form element gets class .fail which indicates invalid value. Some rules also takes argument via rule-arg syntax. For instance minlen-5 states for minimum string length 5 chars.
RULES
| req |
required ( length > 0 ) |
| minlen-x |
minimum lenght |
| maxlen-x |
maximum lenght |
| len-x |
fixed lenght |
| max |
maximum numeric value |
| min |
minimum numeric value |
| num |
numeric |
| notnum |
not numeric |
| nosp |
no spaces |
| alp |
alphabetic |
| alpnum |
alphanumeric |
| date |
date (eu formating) |
| email |
valid email |
| money |
money (numeric including ,.) |
| checked |
is checked (for checkbox ) |
| selected |
is selected (for selectbox ) |
| ip |
ip address |
This are some rules i already defined, but you can easily extended it with your own.
USAGE
<html>
<head>
<script type="text/javascript" src="js/validate.js"></script>
<style> .fail { background: #DF5353; } </style>
</head>
<body>
<form action="" method="post" onsubmit="return validate(this)">
<table>
<tr>
<td width="100">name</td>
<td><input name="name" valid="req min-5 alp" type="text"></td>
</tr>
<tr>
<td width="100">number</td>
<td><input name="name" valid="num" type="text"></td>
</tr>
<tr>
<td>check</td>
<td><input name="true" valid="checked" type="checkbox"></td>
</tr>
<tr>
<td>fruit</td>
<td>
<select name="fruit" valid="selected">
<option></option>
<option>apple</option>
<option>bannan</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><input value="submit" type="submit"></td>
</tr>
</table>
</form>
</body>
</html>
If we look first field example valid has "req min-5 alp", this means that field is required to bi filled, with at least 5 characters that are alphabetic. If all those rules are true field value is valid.
DEMO
I like this script a lot. Its small and gives you easy client side form validation ( don't forget about server side ). It can sure be improved, with like error messages, but I'll leave that up to you. I like it simple.
Download: source
mootools 1.2 is out for quite a while now, so i decided to update mooFader to work with the latest moo framework. hope you like it
DEMO PAGE
head:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moofader.js"></script>
<script>
var images = Array('<?=implode("','",glob('images/*.JPG'));?>');
window.addEvent('load', function(){ new mooFader('fader',images); } );
</script>
html:
<div style="position: relative; width: 390px; height: 390px;" id="fader">
<img src="images/rado.JPG">
</div>
script:
var mooFader = new Class({
Implements: [Events, Options],
options:{
duration: 2000,
fade: 1000
},
initialize: function(el,im,options) {
this.setOptions(options);
this.holder = $(el);
if(!this.holder) return;
this.starter = this.holder.getElement('img');
this.starter.setStyle('position','absolute');
this.im = im;
this.faders = [];
this.images = im.length;
this.counter = 0;
this.change.periodical(this.options.duration,this);
new Asset.image(this.im[this.counter]);
},
change: function(){
if(this.counter > this.images-1) this.counter = 0;
var img = new Element('img',{
'src' : this.im[this.counter],
'styles': { 'position':'absolute' }
}).injectTop(this.holder);
var fader = img.getNext();
new Fx.Tween(fader,{ duration:this.options.fade, onComplete: function(el){ fader.dispose(); } }).start('opacity', 1, 0);
this.counter++;
new Asset.image(this.im[this.counter]);
}
});
i needed one for the website i was working on, so i made small class that works with mootools 1.11.
head:
<script type="text/javascript" src="mootools-1.11.js"></script>
<script type="text/javascript" src="moofader.js"></script>
<script>
var images = Array('<?=implode("','",glob('images/*.JPG'));?>');
window.addEvent('load', function(){ new mooFader('fader',images); } );
</script>
html:
<div style="position: relative; width: 390px; height: 390px;" id="fader">
<img src="images/rado.JPG">
</div>
script:
var mooFader = new Class({
options:{
duration: 3000,
fade: 1000
},
initialize: function(el,im,options) {
this.setOptions(options);
this.holder = $(el);
if(!this.holder) return;
this.starter = this.holder.getElement('img');
this.starter.setStyle('position','absolute');
this.im = im;
this.faders = [];
this.images = im.length;
this.counter = 0;
this.change.periodical(this.options.duration,this);
new Asset.image(this.im[this.counter]);
},
change: function(){
if(this.counter > this.images-1) this.counter = 0;
var img = new Element('img',{
'src' : this.im[this.counter],
'styles': { 'position':'absolute' }
}).injectTop(this.holder);
var fader = img.getNext();
new Fx.Style(fader,'opacity',{ duration:this.options.fade, onComplete: function(el){ fader.remove(); } }).start('1', '0');
this.counter++;
new Asset.image(this.im[this.counter]);
}
});
mooFader.implement(new Options, new Events);
Demo page can be found here.
You all probably know lightbox image popup,.. ok ..this is my simple version of it, using mootools 1.2.
DEMO
Features:
- gallery functions (next, previous image)
- direct link to certain image popup
- image description via title
- no extra css or images needed, except progress bar (optional)
- aware of linux flash non transparency
- fully custom able
- no effects ..not really a feature..but i like it this way
tested & working : firefox, opera, internet explorer, safari, konqueror
Default options
options:{
classname: 'imgbox',
overlay_bg: '#000000',
overlay_opacity: '0.6',
rbox_bg: '#ffffff',
controls_color: 'red',
numberof_color: '#333333',
title_color: '#ffffff',
thumb_url: 'size=thumb',
image_url: 'size=large',
progressbar: '',
margin_top: '20px'
},
Usage
1. Include imgbox.js and mootools.js (DomReady, Selectors, Element.Dimensions, Element.Styles and deps) to header
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/imgbox.js"></script>
2. Add class 'imgbox' (or the one you want) to images you want to popup
<img src="small_image.jpg" class="imgbox" title="image description">
3.Add this line some where on your page (within script tags) or add it directly to imgbox.js
window.addEvent('domready', function(){ new imgBox({}); });
Example with options
window.addEvent('domready', function(){
new imgBox({
thumb_url: 'small_',
image_url: 'big_'
});
});
thumb_url and image_url set the differences in thumbnail and popup image path that will be switched/replaced. For example if you have thumbnail image with name small_12.jpg, the popup will show big_12.jpg.
I hope you like the script. Feel free to use it on your site. If you have an idea how to improve it, let me know.
Download: imgbox.js
