MooTools FormCheck

You just need to add a specific class to each fields you want to check.

Css

<sytle>
input,textarea{width: 250px; border:1px solid #333}
textarea{height:150px;}
label{ width:100px; float:left;}
p{clear:both;}
.submit input{margin-left:100px;}
</style>

Html

<form id=commentForm method=get action=''>
<fieldset>
<legend>Simple Form Validation</legend>
<p>
<label for=sname>Name:</label>
<input id=sname name=name/>
</p>
<p>
<label for=semail>E-Mail:</label>
<input id=semail name=email/>
</p>
<p>
<label for=somments>Comments:</label>
<textarea id=somments name=comments></textarea>
</p>
<p class=submit><input id=submit type=submit value=Submit/></p>
</fieldset>
</form>

MooTools

<script>
window.addEvent(domready, function(){
if($chk($(submit))){

$(submit).addEvent(click, function(ev){

var in1 = $(sname); /* name input text */
var in2 = $(semail); /* email input text */
var in3 = $(somments); /* textarea comments*/

var regEmail = /^[A-Z0-9._%-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/; /* email check */
var ch=1;

(in1.get(value)=='')?or(in1):bl(in1);
(in2.get(value).toUpperCase().match(regEmail))? bl(in2):or(in2); /* email check */
(in3.get(value)=='')?or(in3):bl(in3);

(ch==0)?new Event(ev).stop():false; /* ajax request */

function bl(vars){vars.setStyles({border:'1px solid #333'});}
function or(vars){vars.setStyles({border:'2px solid #F90'});ch=0;}
});

};
});
</script>

Related Posts

MooTools News Ticker, MooTools Slideshow, MooTools Full Screen