Solved

Web validation on tabbed tables using javascript

Posted on 2003-12-12
9
450 Views
Last Modified: 2013-12-18

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?

0
Comment
Question by:StuartCalam
9 Comments
 
LVL 19

Expert Comment

by:madheeswar
ID: 9927002
write a function and palce it in JSheader.

Then call that function in ur OnClick event of ut buttons.
0
 
LVL 19

Expert Comment

by:madheeswar
ID: 9927022
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
 

Author Comment

by:StuartCalam
ID: 9927045
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
 
LVL 19

Expert Comment

by:madheeswar
ID: 9927103
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 24

Assisted Solution

by:HemanthaKumar
HemanthaKumar earned 75 total points
ID: 9927933
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
 
LVL 31

Accepted Solution

by:
qwaletee earned 25 total points
ID: 9928781
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
 
LVL 14

Expert Comment

by:p_partha
ID: 9929159
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
 

Author Comment

by:StuartCalam
ID: 9948627
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
 

Author Comment

by:StuartCalam
ID: 9949380
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I thought it will be a good idea to make a post as it will help in case someone else faces these issues. I trust this gives an idea how each entry in Notes.ini can mean a lot for the Domino Server to be functioning properly. This article discusses t…
IBM Notes offer Encryption feature using which the user can secure its NSF emails or entire database easily. In this section we will discuss about the process to Encrypt Incoming and Outgoing Mails in depth.
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now