Hi, I am using some javascript for a form, when a field isn’t filled in a popup will display an error, I have added a simple security field where a number has to be filled in aswell. Here is the script for the error popup if a field isn’t filled in:
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("Name", "Email", "Enquiry", "Security");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Name", "Email", "Enquiry", "Security");
// dialog message
var alertMsg = "Please complete the following fields:\
";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\
";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\
";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\
";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\
";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
Here is what I am trying to incorporate…
var form = document.getElementById("formcheck");
form.onsubmit = function () {
var Security = document.getElementById("Security");
if (Security.value !== "7") {
alert("Wrong answer! Please try again.");
return false;
}
return true;
}
When I tried incorporating it didn’t work properly, if you filled in all the fields first time, you could input any digit into the Security field and it worked, which it shouldn’t. - If I missed a field like Name, it would popup correctly, and then the Security field wouldf require the number 7 - so it only worked after a field was missed. If anyone knows how I could get the to all work properly I would very much appreciate it, or if anyone knows of any useful sites with tips etc. Thank you
How is the first script called? You can only assign one event handler to form.onsubmit. If you need more than one, you need to use event listeners instead. Unfortunately that’s a bit more complicated, since Internet Explorer has its own way of handling those, and doesn’t support the W3C standard.
var addListener;
if (document.addEventListener) {
addListener = function (element, eventName, listener) {
element.addEventListener(eventName, listener, false);
};
} else if (document.attachEvent) {
addListener = function (element, eventName, listener) {
element.attachEvent("on" + eventName, listener);
};
} else {
addListener = function (element, eventName, listener) {
element["on" + eventName] = listener;
};
}
var form = document.getElementById("formcheck");
addListener(form, "submit", function (e) {
if (!formCheck(form)) {
if (e) {
e.preventDefault();
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
return false;
}
}
return true;
});
addListener(form, "submit", function (e) {
if (document.getElementByid("Security").value !== "7") {
if (e) {
e.preventDefault();
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
return false;
}
}
return true;
});
This example is simplified. You should also take care to remove all event listeners (using detachEvent()) in Internet Explorer when the page unloads, to avoid memory leaks.
Put it it a .js file and link to it with a <script> tag, preferably just before the </body> tag of your page. Then remove the onsubmit attribute from your <form> tag.
If you put my code in a file named formcheck.js in the same directory as the HTML file, the script element should look like this,
