Form validation

Hi,

I have got a form which contains text fields and drop downs. I want a client side validation script which alerts the user all the errors in one alert when they click submit. I also want them to see the errors on the actual screen. It uses regular expressions to validate script.

I have so far managed to alert user all the errors and display on the screen. It uses regular expressions to validate script. However, I have not managed to incorporate the error message for the drop down into one alert for all errors. Can anyone help.

Here is the javascript:

var validationSet = {


'fldMainDriverFirstName': {
'regexp': /^[a-zA-Z]+$/,
'error': '- Please enter the name of the main driver.'
},

'fldMainDriverLastName': {
'regexp': /^[a-zA-Z]+$/,
'error': '- Please enter the surname of the main driver.'
},

'fldHouseNo': {
'regexp': /^[a-zA-Z0-9\s]+$/,
'error': '- Please enter your street name with house number.'
}
}

var fV = {
addEvent: function(elm, evType, fn, useCapture) {
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
},

init: function() {
for (var i in validationSet) {
if (document.getElementsByName(i)) {
var formField = document.getElementsByName(i)[0];
fV.addEvent(formField, 'blur', fV.checkValid, false);

if (!formField.form.validateSubmit) {
fV.addEvent(formField.form, 'submit', fV.checkValidSubmit, false);
formField.form.onsubmit = fV.checkSubmit; // Safari
formField.form.validateSubmit = true;
}
}
}
},

checkValidSubmit: function(e) {
var frm = window.event ? window.event.srcElement : e ? e.target : null;
if (!frm) return;
var errText = [];

for (var i = 0; i < frm.elements.length; i++) {
if (frm.elements[i].name && validationSet[frm.elements[i].name]) {

var failedE = fV.handleValidity(frm.elements[i]);

var errDisplay = document.getElementById('error_' + frm.elements[i].name);

if (failedE && errDisplay) {
errDisplay.innerHTML =
validationSet[failedE.name]['error'];
}
if (!failedE && errDisplay) {
errDisplay.innerHTML = '';
}

if (failedE) {
var labels = document.getElementsByTagName('label');
errText[errText.length] = validationSet[failedE.name]['error'];
for (var j = 0; j < labels.length; j++) {
if (labels[j].htmlFor == failedE.id) {
errText[errText.length - 1] +=
' (field \'' + labels[j].firstChild.nodeValue + '\')';
}

}
}
} /* end 'if' */
} /* end 'for' */


if (errText.length > 0) {
alert('___________________________________________ _______________\n' +
'Please fix the following errors and resubmit:\n\n' +
errText.join('\n') + '\n_______________________________________________ ___________\n' +
"Please re-enter and submit again");
frm.submitAllowed = false;

if (e && e.stopPropagation && e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}

if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
return false;
}
} else {
frm.submitAllowed = true;
}

},

checkSubmit: function() {
if (this.attachEvent) return true;
return this.submitAllowed;
},

checkValid: function(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;

var failedE = fV.handleValidity(target);

var errDisplay = document.getElementById('error_' + target.name);

if (failedE && errDisplay) {
errDisplay.innerHTML = validationSet[failedE.name]['error'];
failedE.focus();
}
if (failedE && !errDisplay) {
alert(validationSet[failedE.name]['error']);
}
if (!failedE && errDisplay) {
errDisplay.innerHTML = '';
}
},

handleValidity: function(field) {
if (!field.value) {
}


var re = validationSet[field.name]['regexp'];
if (!field.value.match(re)) {
return field;
} else {
return null;
}
}


}

fV.addEvent(window, 'load', fV.init, false);


HTML:


<form name="test" action="">
<p><label for="fldMainDriverTitle">Driver title</label>
<select id="fldMainDriverTitle" name="fldMainDriverTitle" >
<option value="none"></option>
<option value="Mr.">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Dr">Dr</option>
<option value="Prof">Prof</option>
<option value="Rev">Rev</option>
<option value="Sir">Sir</option>
<option value="Lady">Lady</option>
<option value="Lord">Lord</option>
</select>
<span class="price">*</span>
<span id="error_fldMainDriverTitle" class="errormessage"></span></p>

<p><label for="fldMainDriverFirstName">Driver name</label>
<input name="fldMainDriverFirstName" type="text" id="fldMainDriverFirstName" value="(MAINDRIVER_FIRSTNAME)" size="15"> <span class="price">*</span>
<span id="error_fldMainDriverFirstName" class="errormessage"></span></p>

<p><label for="fldMainDriverLastName">Driver surname</label>
<input name="fldMainDriverLastName" type="text" id="fldMainDriverLastName" value="(MAINDRIVER_LASTNAME)" size="25"> <span class="price">*</span>
<span id="error_fldMainDriverLastName" class="errormessage"></span></p>
<p><label for="fldHouseNo">Street</label>
<input name="fldHouseNo" type="text" id="fldHouseNo" value="(ADDRESS_1)" size="30">
<span class="price">*</span>
<span id="error_fldHouseNo" class="errormessage"></span></p>


Thanks

Would you mind clicking "Edit Post" and wrapping your code in [code][/code] tags?
This will preserve indentation andh elp us view your code.

"I have not managed to incorporate the error message for the drop down"
i'm not sure I understand that... why validate the drop down?

Then again, I might have a better idea when I actually read your code (hope you indent )

Hi rkoya, welcome to the forums,
I didn't study your code (please edit and wrap in BB tags as MadCowDzz mentioned) but if I understand you, this is how I would do it.

• create a var to hold error msgs
• when error is found append to var's val
• when all error checks are done, if var != '' alert