I am trying to create a multipage form that will validate at each step and stop the user from moving forward if an error is detected. I am able to have it step like a multipage form with javascript and validate each page but it will not stop at the page that has error. I had been looking everway for a fix with no luck. If anyone can help me get a fix for this it will be greatly appreciated. The goal is to stop the user from moving forward if the validation detected error on that page. I am using phatfusion.com's validation code for this.
Here is the javascript for validation which uses mootools
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>validate</title>
<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all">
<link href="validate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../_common/js/mootools.js"></script>
<script type="text/javascript" src="validate.js"></script>
<script type="text/javascript">
var sections = new Array('partOne', 'partTwo', 'partThree');
function init() {
show('partOne');
document.forms['myForm'].elements['name'].focus();
}
function show(section) {
for (var i = 0; i < sections.length; i++) {
if (sections[i] == section) {
document.getElementById(sections[i]).style.display = 'block';
} else {
document.getElementById(sections[i]).style.display = 'none';
} }}
</script>
</head>
<body onload="init();">
<form id='myForm' action="server.asp" method="post">
<div id="partOne">
<p><label for="name">Name:*</label><input id="name" name="name" title="Please enter your name" type="text" class="required" /></p>
<p><label for="email">Email:*</label><input id="email" name="email" title="Please enter your email" type="text" class="required email" /></p>
<p><label for="fax">Fax:</label><input id="fax" name="fax" type="text" /></p>
<input type="submit" value="Next" onclick="show('partTwo');" href="#partTwo" id="submit" class="submit" />
</div>
<div id="partTwo">
<p><label for="postcode">Postcode:*</label>
<input id="postcode" name="postcode" title="Postcode" type="text" class="required postcode" /></p>
<p><label for="country">Country:*</label>
<select id="country" name="country" title="Country" class="required">
<option value="">please select</option>
<option value="uk">uk</option>
</select></p>
<input type="button" value="Back" onclick="show('partOne');" href="#partOne" />
<input type="submit" value="Next" onclick="show('partThree');" href="#partThree" id="submit" class="submit" />
</div>
<div id="partThree">
<p><label for="dob">D.O.B:*</label>
<input id="dob" name="dob" title="Date of Birth" type="text" class="required date" /></p>
<input type="button" value="Back" onclick="show('partTwo');" href="#partTwo" />
<input type="submit" value="Submit" id="submit" class="submit" /></div>
</form>
<script type="text/javascript">
window.addEvent('domready', function(){
var myFormValidation = new Validate('myForm',{
errorClass: 'red'
});
});
</script>
</body>
</html>Here is the javascript for validation which uses mootools
var Validate = new Class({
getOptions: function(){
return {
validateOnBlur: true,
errorClass: 'error',
errorMsgClass: 'errorMessage',
dateFormat: 'dd/MM/yy',
onFail: Class.empty,
onSuccess: false,
showErrorsInline: true,
label: 'Please wait...'
};},
initialize: function(form, options){
this.setOptions(this.getOptions(), options);
this.form = $(form);
this.elements = this.form.getElements('.required');
this.list = [];
this.elements.each(function(el,i){
if(this.options.validateOnBlur){
el.addEvent('blur', this.validate.bind(this, el));
}
}.bind(this));
this.form.addEvent('submit', function(e){
var event = new Event(e);
var doSubmit = true;
this.elements.each(function(el,i){
if(! this.validate(el)){
event.stop();
doSubmit = false
this.list.include(el);
}else{
this.list.remove(el);
}
}.bind(this));
if(doSubmit){
if(this.options.onSuccess){
event.stop();
this.options.onSuccess(this.form);
}else{
this.form.getElement('input[type=submit]').setProperty('value',this.options.label);
}
}else{
this.options.onFail(this.getList());
}
}.bind(this));
},
getList: function(){
var list = new Element('ul');
this.list.each(function(el,i){
if(el.title != ''){
var li = new Element('li').injectInside(list);
new Element('label').setProperty('for', el.id).setText(el.title).injectInside(li);
} });
return list;
},
validate: function(el){
var valid = true;
this.clearMsg(el);
switch(el.type){
case 'text':
case 'textarea':
case 'select-one':
if(el.value != ''){
if(el.hasClass('email')){
var regEmail = /^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/;
if(el.value.toUpperCase().match(regEmail)){
valid = true;
}else{
valid = false;
this.setMsg(el, 'Please enter a valid email address');
}}
if(el.hasClass('postcode')){
var regPC = /^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z])))) [0-9][A-Za-z]{2})$/
if(el.value.match(regPC)){
valid = true;
}else{
valid = false;
this.setMsg(el, 'Please enter a valid postcode');
}}
if(el.hasClass('date')){
var d = Date.parseExact(el.value, this.options.dateFormat);
if(d != null){
valid = true;
}else{
valid = false;
this.setMsg(el, 'Please enter a valid date in the format: '+this.options.dateFormat.toLowerCase());
}}
}else{
valid = false;
this.setMsg(el);
}
break;
case 'radio':
var rad = $A(this.form[el.name]);
var ok = false;
rad.each(function(e,i){
if(e.checked){
ok = true;
}
});
if(!ok){
valid = false;
this.setMsg(rad.getLast(), 'Please select an option');
}else{
valid = true;
this.clearMsg(rad.getLast());
}
break;
}
return valid;
},
setMsg: function(el, msg){
if(msg == undefined){
msg = el.title;
}
if(this.options.showErrorsInline){
if(el.error == undefined){
el.error = new Element('span').addClass(this.options.errorMsgClass).setText(msg).injectAfter(el);
}else{
el.error.setText(msg);
}
el.addClass(this.options.errorClass);
}
},
clearMsg: function(el){
el.removeClass(this.options.errorClass);
if(el.error != undefined){
el.error.remove();
el.error = undefined;
}
}
});
Validate.implement(new Options);
Validate.implement(new Events);