Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

form validation

Posted on 2006-06-22
3
Medium Priority
?
165 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 800 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
What You Need to Know when Searching for a Webhost Provider
Integration Management Part 2
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…

782 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