form validation

[rkoya]

Hi,

I have a form that has text fields as well as drop down fields, I have got validations for the text fields onblur and on submit that display all errors that the user has made in one alert. It uses regulator expressions. I know how to check for an error in dropdown but don't know how to have the error without creating another alert. I only want one alert for all errors.

Here is my code html:

<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> <input name="Submit" value="Send" type="submit" ></p>


JS code first part:

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.name && validationSet[frm.elements.name]) {

var failedE = fV.handleValidity(frm.elements);

var errDisplay = document.getElementById('error_' + frm.elements.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);


JS code second part:

var validationSet = {


'phone': {
'regexp': /^\(\d\d\d\)\s\d\d\d-\d\d\d\d+$/,
'error': '- The phone number is invalid or empty. \n' +
" It should be in the form (123) 456-7890."
},

'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.'
}
}

Thanks

 

[theniteowl]

Are you setting up a listener to capture the submit?
I did not spend much time looking over the code.

Typically, I would set an onsubmit="return validate()" line into the form. This will call the validate function when the attempt is made to submit the form.

Your validate function would then run each test you need sequentially and build your alert message as it goes.
This simplifies things having only a single trigger for testing and only needing one output alert.


At my age I still learn something new every day, but I forget two others.

 

[rkoya]

thanks for that, however how would it sequentially build the alert, so that only one alert output happens.

Thanks

 

[theniteowl]

You are using some type of automatic validation system to do your testing, you should look at the original site to see if it contains anything about testing select fields.

I would set it up more straightforward.
The code below is just a rough approximation. You would have to setup your own tests for your own fields but the principle is that you use the onsubmit command to call the validate function. The validate function tests each field you specify in whatever way you specify and either adds to the errMsg value or not as it goes.
When testing is done if errMsg is not blank it displays the error messages then returns false so the submit is canceled. If no errors had occured it returns true letting the form submit.

Telling you how to modify your current code to do what you want would mean having a lot more information on your intentions, all of your source code and a lot of time to spend figuring out what the code is doing. It seems overly complex for what you appear to be doing though and the example below might be a better approach.

<html>
<head>
<script type="text/javascript">
function validate() {
  var errMsg = '';
  var myField1 = document.getElementById('field1');
  var myField2 = document.getElementById('field2');
  if (testing of field1 fails) {
    errMsg += 'Field 1 failed testing\n';
  }
  if (testing of field2 fails) {
    errMsg += 'Field 2 failed testing\n';
  }
  if (errMsg > '') {
    alert(errMsg);
    return false;
  }
  return true;
}
</script>
</head>
<body>
<form id="myform" action="" onsubmit="return validate()">
<input type="text" id="field1"><br>
<select id="field2">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>

At my age I still learn something new every day, but I forget two others.