Solved

Web validation on tabbed tables using javascript

Posted on 2003-12-12
9
458 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

For users on the Lotus Notes 8 Standard client, this article provides information on checking the Java Heap size and adjusting it to half of your system RAM in attempt to get the Lotus Notes 8.x Standard client to run faster.  I've had to exercise t…
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…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

840 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