Forum Moderators: open
One function is used to check that all required input boxes are filled in where the keyword 'required' is used as part of the form name attribute e.g. <input type="text" name="required contactname" size="40" />
function checkrequired(which) {
var pass=true;
if (document.images) {
for (i=0;i<which.length;i++) {
var tempobj=which.elements[i];
if (tempobj.name.substring(0,8)=="required") {
if (((tempobj.type=="text"¦¦tempobj.type=="textarea")&&
tempobj.value=='')¦¦(tempobj.type.toString().charAt(0)=="s"&&
tempobj.selectedIndex==0)) {
pass=false;
break;
}
}
}
}
if (!pass) {
shortFieldName=tempobj.name.substring(8,30).toUpperCase();
alert("Please make sure the "+shortFieldName+" field was properly completed.");
return false;
}
else
return true;
}
The other function is for e-mail address validation to make sure relevant characters are entered to confirm the mail address validity.
function checkEmail(myForm) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value)){
return (true)
}
alert("Invalid E-mail Address! Please re-enter.")
return (false)
}
Due to them both needing to be called by the form, I am tying to merge them but having difficulty. I have tried to create a new function formValidator() and put both functions within this and then call formValidator() using onsubmit.
I have also followed another tutorial that seems to create several if statements for each part that needs validation and then returns false if none of them match up but this doesn't work either. I have also thought whether the formValidator() requires parameters to be passed i.e. which and myForm but this doesn't work either.
Could anybody provide me with some assistance please or possible guidelines of how this can be achieved?
Many thanks in advance,
Michael
<form method="post" action="somescript.cgi" id="contact-form">
Where's my onSubmit? Add this to the top of your script section:
window.onload=function() { attachBehaviors(); }
function attachBehaviors () {
if (document.getElementById('contact-form')) {
document.getElementById('contact-form').onsubmit = function () {
checkrequired(this);
checkEmail(this);
return false;
}
}
}
This attaches the behavior to the form on load, no need for in-line JS. It will only do so if "contact-form" exists, so you can put this in your global external Javascript and it will only affect pages with that form on it.
oops .... I see checkrequired accepts a different parameter, not the form object . . . well this will get you started . . .
I'm aware of what you mean with id's so you can refer to specific areas, your saying to
a) use an id for the form itself
b) use an id for each form input method instead of just the name?
At present my onsubmit is as follows
onsubmit="return checkrequired(this)
which is sufficient for checking each required form input / selection drop down has data.
From my partial understanding of what you have suggested, I interpret this as follows
1) create a function 'attachBehaviours()' which will be called when the window i.e. browser window loads up
2)This function will reference the form element itself by its id 'contact-form'
3)After checking for the id 'contact-form' within the document it then runs the onsubmit event for the contact-form id of the document which in turn is attached to function() and this is responsible for checking both required and checkEmail?
Is this along the right lines?
Thanks,
Michael
