Web validation on tabbed tables using javascript


There must be a simple answer to this..!

I am trying to validate a form using Javascript.  The form has a tabbed table and on three of the tabs are fields that need to be validated.  If I am on tab a then it validates field a.  If I am on tab b it validates field b and so on.  However if I am in tab a it cannot find field b and an error message is generated (field is not an object message).

Generate HTML for all fields is enabled and the source shows all fields.

Any ideas?  One thought is having computed fields outside the tabbed table whose values pull in from field a, b etc.  But this seems daft - having to have two fields for each field I want to validate and I am not sure it would work anyway?

StuartCalamAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

madheeswarCommented:
write a function and palce it in JSheader.

Then call that function in ur OnClick event of ut buttons.
0
madheeswarCommented:
In JSHeader:
function f1(){
if(document.forms[0].name_x.value=="" ){
alert("Please enter your Name.")
document.forms[0].req1name_x.focus();
return false;
}
}

'============

and in Button onclick event,
f1()
0
StuartCalamAuthor Commented:
this is what I have

My button onclick event has the following...

if (Validation()) {
      document.forms[0].submit()
}


with the function in the JS Header...

function Validation() {

if (document.forms[0].AccountName.options[0].selected) {
alert("Please enter the Account this complaint is originating from");
document.forms[0].AccountName.focus();
return false;
}


The error message occurs when I am on a tab where the field AccountName is not displayed.
0
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

madheeswarCommented:
is it a keyword field?
then use this:
document.forms.fieldname.options[document.forms.fieldname.selectedIndex].text

else

u can use mine as it is.
0
HemanthaKumarCommented:
The culprit in your code is

document.forms[0].AccountName.focus();

When the field is not visible you cannot use that method.. Either check to make sure that the field is available before you focus

so the script would become

if (document.forms[0].AccountName.type != "hidden") {document.forms[0].AccountName.focus();}


~Hemanth
0
qwaleteeCommented:
Tabbed tabls are actually implemented as separate pages for each tab.  Each time you click a tab, data is submitted, and a new page loads.  The fields from the "inactive" tabs are still sent as hidden fields,so the data is not lost from click to click.

The problem is that you assume that to fix the error, the user will be able to just go right to the offending field and correct the problem.  Instead you need to be sensitive to which tab is active, and either jump to te field if available, or tell the user to switch tabs first. It would be possible, but quite difficult, to actually switch the tabs yourself, place the cursor in the field, and prompt the user, so I would just prompt he user with a slightly different prompt ex[plaining that the field is required, and the user needs to switch to "tab A" and fill it out.

A much nicer implementation would use DHTML to have al tabs present at the same time, with some visible and some hidden, as the Notes client does it.  Too bad.

Anyway, here's your code, which is similar to Hemantha's....

function Validation() {

if (document.forms[0].AccountName.options[0].selected) {
  if (document.forms[0].AccountName.type = "hidden") {
    alert("Please enter the Account this complaint is originating from. You can find the Account field on TAB A.");
  } else {
    document.forms[0].AccountName.focus();}
    alert("Please enter the Account this complaint is originating from");
  }
  return false;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
p_parthaCommented:
Most of the tabbed table concept is built on the funda that each tab is enclosed between div tag and works by making manipulating the display style.


So ideally if you have given id's to each of the tab just have somethig like this:

document.getElementById("<tabid>").style.display='block'
document.forms[0].AccountName.focus()


Before setting the focus to the field in another tab, make that tab display style to block and then set the focus.

Probably it might not be relevant to you also

Partha
0
StuartCalamAuthor Commented:
On the tab I am getting the following (the line surrounded by the **'s is the line generating the error)...

Error : Object doesn't support this action

Javascript:
if (document.forms[0].cCreator.options[0].selected) {
**  if (document.forms[0].cCreator.type = "hidden") { **
    alert("Please enter the Account contact for this Complaint. You can find the Account field on the General Tab.");
  }
      else {
      alert("Please enter the Account contact for this Complaint");
      document.forms[0].cCreator.focus();
  }
  return false;
}

HTML:
<SELECT NAME="cCreator" onChange="_doClick('$Refresh', this, '_self', '#_RefreshKW_cCreator')">
<OPTION>
<OPTION>steven leung</SELECT>





Or, not on the tab I am getting the following (again the line surrounded by the **'s is the line generating the error)

Error:
'document.forms.cCreator.options.0' is not an object

Javascript:
**if (document.forms[0].cCreator.options[0].selected) {**
  if (document.forms[0].cCreator.type = "hidden") {
    alert("Please enter the Account contact for this Complaint. You can find the Account field on the General Tab.");
  }
      else {
      alert("Please enter the Account contact for this Complaint");
      document.forms[0].cCreator.focus();
  }
  return false;
}

HTML:
<INPUT NAME="cCreator" TYPE=hidden VALUE="">


As far as I can tell this is how I should be doing it?
0
StuartCalamAuthor Commented:
Hi all.
Managed to get it working by doing the hidden check first like so....

if (document.forms[0].cCreator.type == "hidden")
 {
   if (document.forms[0].cCreator.value == "") {
    alert("Please enter the Account contact for this Complaint. You can find the Account Contact field on the General Tab.");
    document.forms[0].AccountName.focus();
    return false;
    }
  }
  else
  {
      if (document.forms[0].cCreator.options[0].selected) {
    alert("Please enter the Account contact for this Complaint. ");
    document.forms[0].cCreator.focus();
    return false;
  }
  }

Thanks for your help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Lotus IBM

From novice to tech pro — start learning today.