Solved

form validation

Posted on 2006-06-22
3
159 Views
Last Modified: 2013-12-24
I'm developing a coldfusion page where an employee can rate their knowledge of 50+ skills (Word, Excel, ASP, COBOL, etc) on a scale of 0-4 where 0 is no knowledge and 4 is a subject matter expert.  If a user has no knowledge, the employee keeps the default value of 0 (zero); however, if an employee rates their knowledge of 1,2,3, or 4, then the yearused needs to be required.  I was able to figure how to validate one instance, but when there are 50+ skills, I'm clueless.  

Criteria:
- If a radio button (ranking) is selected, the year must be selected; similarly, if a year is a selected, the radio button needs to be selected;
- If error, alert user to the issue as well as include the skill name of the issue
- I would like the focus to be returned to the yearused (since you can't see the focus on the radio button)

<!--- idea of table layout for the knowledge ranking system --->
<table>
<tr>
      <td>Skill Name</td>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>Year Last Used</td>
  </tr>
<cfoutput query="getskills">
<tr>
      <td>#getSkills.skill_name#</td>
      <td><input name="RANKING_PL#ID#" type="radio" value="0"></td>
      <td><input name="RANKING_PL#ID#" type="radio" value="1"></td>
      <td><input name="RANKING_PL#ID#" type="radio" value="2"></td>
      <td><input name="RANKING_PL#ID#" type="radio" value="3"></td>
      <td><input name="RANKING_PL#ID#" type="radio" value="4"></td>
      <td><select name="yearused#id#" size="1">
            <option value="0">Not Applicable</option>
            <option value="2001">2001 or Earlier</option>
            <option value="2002">2002</option>
            <option value="2003">2003</option>
            <option value="2004">2004</option>
            <option value="2005">2005</option>                                                
            <option value="2006">2006</option>            
      </select>
            </td>
        </tr></cfoutput>
        <tr>
              <td colspan="7"><input type="submit"></td>
      </tr>
</table>
0
Comment
Question by:dl8453
  • 2
3 Comments
 
LVL 1

Author Comment

by:dl8453
ID: 16963216
This is a very similar to what I'm wanting to accomplish...
http://javascript.internet.com/forms/val-selection.html
0
 
LVL 15

Accepted Solution

by:
DanielSKim earned 200 total points
ID: 16964526
is this what you are looking for?

<form name="formName" onsubmit="return formValidationFunctionName()">
<table>
<tr>
     <td>Skill Name</td>
     <td>0</td>
     <td>1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>Year Last Used</td>
  </tr>
<cfoutput query="getskills">
<tr>
     <td>#getSkills.skill_name#</td>
     <td><input name="RANKING_PL#ID#" type="radio" value="0" checked></td>
     <td><input name="RANKING_PL#ID#" type="radio" value="1"></td>
     <td><input name="RANKING_PL#ID#" type="radio" value="2"></td>
     <td><input name="RANKING_PL#ID#" type="radio" value="3"></td>
     <td><input name="RANKING_PL#ID#" type="radio" value="4"></td>
     <td><select name="yearused#id#" id="#getSkills.skill_name#" size="1">
          <option value="0">Not Applicable</option>
          <option value="2001">2001 or Earlier</option>
          <option value="2002">2002</option>
          <option value="2003">2003</option>
          <option value="2004">2004</option>
          <option value="2005">2005</option>                                        
          <option value="2006">2006</option>          
     </select>
          </td>
       </tr></cfoutput>
       <tr>
            <td colspan="7"><input type="submit"></td>
     </tr>
</table>
</form>

<script>

function getRankingInputs() {
      var frm = document.forms['formName'];
      var inputs = frm.getElementsByTagName('input');
      var i;
      var returnVal = new Object();
      var inputName;
      var skillId;
      
      for (i=0; i < inputs.length; i++) {
            inputName = inputs[i].name;
            if (inputName.substr(0,10).toUpperCase() == 'RANKING_PL' && inputs[i].value == '0') {
                  skillId = inputName.substr(10,inputName.length-10);
                  returnVal[skillId] = frm[inputs[i].name];
            }
      }
      
      return returnVal;
}

function getYearUsedSelects() {
      var frm = document.forms['formName'];
      var selects = frm.getElementsByTagName('select');
      var s;
      var returnVal = new Object();
      var selectName;
      var skillId;
      
      for (s=0; s < selects.length; s++) {
            selectName = selects[s].name;
            if (selectName.substr(0,8).toUpperCase() == 'YEARUSED') {
                  skillId = selectName.substr(8,selectName.length-8);
                  returnVal[skillId] = selects[s];
            }
      }
      
      return returnVal;
}

/* set as global variables so that the elements only have to be found once */
var rankingInputs = getRankingInputs();
var yearUsedSelects = getYearUsedSelects();


function formValidationFunctionName() {
      var r;
      var skillName;
      
      for (r in rankingInputs) {
            skillName = yearUsedSelects[r].id;
            if (!rankingInputs[r][0].checked && yearUsedSelects[r].value == 0) {
                  alert('You need to specify the year last used for ' + skillName);
                  yearUsedSelects[r].focus();
                  return false;
            } else if (rankingInputs[r][0].checked && yearUsedSelects[r].value != 0) {
                  alert('You need to specify a skill level for ' + skillName);
                  yearUsedSelects[r].focus();
                  return false;            
            }
      }
      
      return true;
}


</script>
0
 
LVL 1

Author Comment

by:dl8453
ID: 16964992
This was SPOT ON PERFECT!  I was able to just drop it in and it worked on the first attempt.  
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
nginx with multiple websites --need help with phpmyadmin please 5 62
Unsearchable in Google,Yahoo and Bing. 6 61
PHP Register global 21 89
CFFILE upload help 98 159
This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
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 …

803 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