Solved

Web validation on tabbed tables using javascript

Posted on 2003-12-12
9
459 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Lotus Notes: Email Delivery Failure 5 200
Adding a named anchor in a Lotus Notes Form 6 100
Email Forward: Get Around Relay Issue 3 128
Lotus Notes – Domino Document Manager 4 126
You’ve got a lotus Domino web server, and you have been told that “leverage browser caching” is a must do. This means that we have to tell the browser everywhere in the web to use cache. In other words, we set (and send) an expiration date in the HT…
For beginners of Lotus Notes user this is important to know about the types of files and their location supported by IBM Notes. Mostly users are unaware about how many file types are created and what their usages are. This Article is fully dedicated…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

733 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