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