Solved

<CFSELECT>..how to display an error message if left blank

Posted on 2001-08-29
26
276 Views
Last Modified: 2013-12-24
I want the option box to show the initial value shown to be blank, and if it is left blank, display an error box.
...Thanks, Frank

<CFFORM NAME="confirm" ACTION="process.cfm" METHOD="POST">

<cfselect name="music" required="Yes" multiple="no"
message="Please select a type of music" size="1">
<option value="">
<option value="rock">Rock
<option value="classical">Classical
</cfselect>

</CFFORM>
0
Comment
Question by:FrankieT77
  • 14
  • 7
  • 5
26 Comments
 
LVL 2

Expert Comment

by:iamari
Comment Utility
Just add, after form tag:

<CFFORM NAME="confirm" ACTION="process.cfm" METHOD="POST">
<input type="hidden" name="music_required" value="Please select a type of music">

0
 
LVL 1

Expert Comment

by:FranzRinkleff
Comment Utility
Try cut and pasting the following code

<html>
<head>
     <title>Untitled</title>
     <script language="JavaScript">
     <!--
          function validateMusic()
          {
               if(document.confirm.music.value == "")
               {
                    alert("Please select a type of music!");
                    return false;
               }
               else
               {
                    return true;
               }
          }
     //-->
     </script>    
</head>
<body>
<CFFORM NAME="confirm" ACTION="process.cfm" METHOD="POST" onSubmit="return validateMusic()">
     <cfselect name="music">
          <option value="">
          <option value="rock">Rock
          <option value="classical">Classical
     </cfselect>
     <input type="submit" name="submitButton" value="Submit">
</CFFORM>
</body>
</html>
0
 
LVL 1

Expert Comment

by:FranzRinkleff
Comment Utility
The previous code I submitted calls the javascript function validateMusic when the form is submitted.  If the form field is equal to "" then your message is displayed and the function returns false.  If false is returned to the onSubmit attribute of the form the form is not submitted.

I probably would not have used a cfform for this form.  i probably would have just used an html form.  I try to do everything
0
 
LVL 1

Expert Comment

by:FranzRinkleff
Comment Utility
The reason your cfform with cfselect statement did not work is because you have the size of the cfselect field set as 1.  It assumes that the 1 option showing is selected and therefore the message does not appear

if you change the size to 2 or 3 then it does not which one is selected until one is selected and if you hit the submit button it will display your message.

here is the code for that.

<html>
<head>
     <title>Untitled</title>
</head>
<body>
<CFFORM NAME="confirm" ACTION="process.cfm" METHOD="POST">
     <cfselect name="music" required="Yes" multiple="no"
          message="Please select a type of music" size="3">
          <option value="">
          <option value="rock">Rock
          <option value="classical">Classical
     </cfselect>
     <input type="submit" name="submitButton" value="Submit">
</CFFORM>
</body>
</html>
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz, thanks for the variety of suggestions, i tried the cfselect with changing the sizes which i do prefer, however i do want the size to stay at 1, for the "clean" look on the front end. Is that the only way possible to do that without using the javascript?, because i have about 6 fields to validate.

Thanks,
Frank
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz, i guess my question with the javascript is how can i incorporate multiple statements in one if statement, or is there a different way wit hjave to validate multiple fields?

Frank
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz, i guess my question with the javascript is how can i incorporate multiple statements in one if statement, or is there a different way wit hjave to validate multiple fields?

Frank
0
 
LVL 2

Expert Comment

by:iamari
Comment Utility
If you have required and non-required fields, you can name the required ones with the same prefix, like:
requiredMusic, requiredField2,etc

Then add the onSubmit to your form:

<CFFORM NAME="confirm" ACTION="process.cfm" METHOD="POST" onSubmit="return checkrequired(this)">

Then do:


function checkrequired(which)
{
var pass=true;
if (document.images)
     {
     for (i=0;i<which.length;i++)
          {
          var tempobj=which.elements[i];
          if (tempobj.name.substring(0,8)=="required")
               {
               if (((tempobj.type=="text"||tempobj.type=="textarea"||tempobj.type=="hidden") &&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1))
                    {
                    pass=false;
                    break;
                    }
               }
          }    
     }
     
     if (!pass)
     {
     // strip "required" from tempobj name and customize messages

     shortFieldName=tempobj.name.substring(8,30);
     
        switch (shortFieldName)
        {
          case "music":
          alert("Please select a type of music");
          return false;
          break;

          case "Field2":
          alert("Please select something here.");
          return false;
          break;

               }
     }
     else
     return true;
}


0
 
LVL 1

Expert Comment

by:FranzRinkleff
Comment Utility
i think you are going to have to use javascript to validate the form before submitting it if you want to have the cfselect size attribute set to 1.  

you could use one javascript function to validate all 6 of your form fields or you could have six different javascript functions called by the form onSubmit attribute.

one function

onSubmit="return validateEntireForm()"

or

onSubmit="return validateField1(); return validateField2(); return validateField3()"

of course i only listed 3 functions above.  

unless you think you can reuse a validation function for a field in lots of other forms i would probably just use 1 function to validate them all.  i would nest the if statements

functin validateEntireForm()
{
  if (field1 != validValue)
  {
    alert("invalid value");

  }


}
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz, thanks for the variety of suggestions, i tried the cfselect with changing the sizes which i do prefer, however i do want the size to stay at 1, for the "clean" look on the front end. Is that the only way possible to do that without using the javascript?, because i have about 6 fields to validate.

Thanks,
Frank
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz, thanks for the variety of suggestions, i tried the cfselect with changing the sizes which i do prefer, however i do want the size to stay at 1, for the "clean" look on the front end. Is that the only way possible to do that without using the javascript?, because i have about 6 fields to validate.

Thanks,
Frank
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz, thanks for the variety of suggestions, i tried the cfselect with changing the sizes which i do prefer, however i do want the size to stay at 1, for the "clean" look on the front end. Is that the only way possible to do that without using the javascript?, because i have about 6 fields to validate.

Thanks,
Frank
0
 
LVL 1

Expert Comment

by:FranzRinkleff
Comment Utility
submitted last comment by mistake.  i guess these are not nested.  just use if else if else.

functin validateEntireForm()
{
 if (field1 != validValue)
 {
   alert("invalid value");
   return false;
 }
 else if (field2 != validValue)
  {  
   alert("invalid value");
   return false;
 }
 else if (field3 != validValue)
  {  
   alert("invalid value");
   return false;
 }
else
{
return true;
 }
}
0
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!

 

Author Comment

by:FrankieT77
Comment Utility
Franz, thanks for the variety of suggestions, i tried the cfselect with changing the sizes which i do prefer, however i do want the size to stay at 1, for the "clean" look on the front end. Is that the only way possible to do that without using the javascript?, because i have about 6 fields to validate.

Thanks,
Frank
0
 
LVL 2

Expert Comment

by:iamari
Comment Utility
I've just tested this code in both Netscape and IE.
Copy, paste and save as test.cfm then run it. Note that you have to drop <cfform> and <cfselect> and use
regular HTML tags


<html>
<head>
     <title>Test</title>
</head>

<script language="JavaScript">
   <!--

                     function checkrequired(which)
                     {
                     var pass=true;
                     if (document.images)
                         {
                         for (i=0;i<which.length;i++)
                              {
                              var tempobj=which.elements[i];
                              if (tempobj.name.substring(0,8)=="required")
                                   {
                                   if (((tempobj.type=="text"||tempobj.type=="textarea"||tempobj.type=="hidden")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==0))
                                        {
                                        pass=false;
                                        break;
                                        }
                                   }
                              }    
                         }
                         
                         if (!pass)
                         {
                         // strip "required" from tempobj name and customize messages

                         shortFieldName=tempobj.name.substring(8,30);
                         
                            switch (shortFieldName)
                            {
                              case "Music":
                              alert("Please select a type of music");
                              return false;
                              break;

                              case "Field2":
                              alert("Please type something in the second field.");
                              return false;
                              break;

                                   }
                         }
                         else
                         return true;
                     }

//-->
</script>

<body>
<FORM NAME="confirm" ACTION="test.cfm" METHOD="POST" onSubmit="return checkrequired(this)">

<select name="requiredMusic" required="Yes"  size="1">
   <option value="">
   <option value="rock">Rock
   <option value="classical">Classical
</select>

<input type="text" name="requiredField2"><p>
<input type="text" name="nonRequiredField"><p>
<input type="submit">
</FORM>


</body>
</html>
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz, thanks for the variety of suggestions, i tried the cfselect with changing the sizes which i do prefer, however i do want the size to stay at 1, for the "clean" look on the front end. Is that the only way possible to do that without using the javascript?, because i have about 6 fields to validate.

Thanks,
Frank
0
 
LVL 2

Expert Comment

by:iamari
Comment Utility
that wasn't Franz, and the last code I've sent really works...
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz, thanks for the variety of suggestions, i tried the cfselect with changing the sizes which i do prefer, however i do want the size to stay at 1, for the "clean" look on the front end. Is that the only way possible to do that without using the javascript?, because i have about 6 fields to validate.

Thanks,
Frank
0
 

Author Comment

by:FrankieT77
Comment Utility
Franz,
i tried what u said and now when the submit is clicked and the option lists are blank, it just proceeds to the next page without the message boxes appearing. heres the code:


<script language="JavaScript">
    <!--
         function validateFields()
            {
            if(document.confirm.state_providence.value == "")
               {
                alert("Please select a state");
              return false;
          }
                    else if(document.confirm.height.value == "")
               {
                alert("Please select your height");
              return false;
          }
                    else if(document.confirm.hair_color.value == "")
               {
                alert("Please select your hair color");
              return false;
          }
                    else if(document.confirm.race.value == "")
               {
                alert("Please select your race");
              return false;
          }
              else
               {
               return true;
          }
          }
    //-->
     </script>

<CFFORM NAME="confirm" ACTION="registrationprocess.cfm" METHOD="POST"  onSubmit="return validateFields()">


HERES A EXAMPLE OF ONE OF THE OPTION LISTS:

<select name="hair_color" size="1">
     <OPTION value=""></OPTION>
  <option value="blonde">Blonde</option>
  <option value="brunette">Brunette</option>
    <option value="black">Black</option>
     <option value="red">Red</option>
  <option value="brown">Brown</option>
  <option value="brown">Other</option>
</select>
0
 

Author Comment

by:FrankieT77
Comment Utility
iamari, i appreciate your answer, however im not that experienced at all in java, and i really cant understand exactly what the entire code does.
0
 

Author Comment

by:FrankieT77
Comment Utility
iamari, i appreciate your answer, however im not that experienced at all in java, and i really cant understand exactly what the entire code does.
0
 
LVL 2

Expert Comment

by:iamari
Comment Utility
The code iterates through all form fields and selects the ones who's name start with "required" (if field name does NOT start with required, is not checked)

                                         function checkrequired(which)
                                         {
                                         var pass=true;
                                         if (document.images)
                                             {
                                             for (i=0;i<which.length;i++)
                                                  {
                                                  var tempobj=which.elements[i];
                                                  if (tempobj.name.substring(0,8)=="required")

Then it checks that each of these fields has a value:

                                                       {
                                                       if
                   (((tempobj.type=="text"||tempobj.type=="textarea"||tempobj.type=="hidden")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==0))
                                                            {
                                                            pass=false;
                                                            break;
                                                            }
                                                       }
                                                  }    
                                             }
                                             
                                             if (!pass)
                                             {

This step cuts out the "required" from the field name, not really necessary unless you want to use the field name as a variable.

                                             // strip "required" from tempobj name and customize messages

                                             shortFieldName=tempobj.name.substring(8,30);

Now you can enter a customized message for each field missing a value (it's all case sensitive)
                                             
                                                switch (shortFieldName)
                                                {

So, the "requiredMusic" field becomes "Music" and the message is sent

                                                  case "Music":
                                                  alert("Please select a type of music");
                                                  return false;
                                                  break;

                                                  case "Field2":
                                                  alert("Please type something in the second field.");
                                                  return false;
                                                  break;

                                                       }
                                             }

If a value exists, field passes test

                                             else
                                             return true;
                                         }


You can just copy the code I've previously sent, save it as test.cfm, open in a browser and test it.
Then, on your real template drop the <cftags> (cfform and cfselect) and use regular <form> and <select>, prefix all your required fields with the string "required" and add the onSubmit action to the form tag
0
 
LVL 1

Accepted Solution

by:
FranzRinkleff earned 15 total points
Comment Utility
i submitted the following code earlier.  It works for me.  so it should work for you as well.  If i don't select something it shows an alert and does not submit.  have you tried it?  if so and it does not work for you than i think you might have javascript disabled.  i am not quite sure how you disable it or enable it but it should be on your browsers internet options.  are you using netscape or internet explore.  i use internet explore but it should not matter.  

my quess if your form is not working is because you have a javascript syntax error.  if you have a syntax error and you are using internet explore in the lower left corner of the browser you will see a little yellow icon that looks like a yield sign.  

anyway if you have a javascript error the page will submit because the function did not get a chance to return false.

what i would do is get your page to validate 1 field first.  once you get this to work then add validation for  the second field with the else if and so on.  perhaps you are referencing  a field wrong in your javascript function.  i did not see anyting that looked wrong.  
<html>
<head>
    <title>Untitled</title>
    <script language="JavaScript">
    <!--
         function validateMusic()
         {
              if(document.confirm.music.value == "")
              {
                   alert("Please select a type of music!");
                   return false;
              }
              else
              {
                   return true;
              }
         }
    //-->
    </script>    
</head>
<body>
<CFFORM NAME="confirm" ACTION="process.cfm" METHOD="POST" onSubmit="return validateMusic()">
    <cfselect name="music">
         <option value="">
         <option value="rock">Rock
         <option value="classical">Classical
    </cfselect>
    <input type="submit" name="submitButton" value="Submit">
</CFFORM>
</body>
</html>
0
 

Author Comment

by:FrankieT77
Comment Utility
iamari, i appreciate your answer, however im not that experienced at all in java, and i really cant understand exactly what the entire code does.
0
 

Author Comment

by:FrankieT77
Comment Utility
Thanks for the help Franz, you helped me as much as you possibly can, i will go try and debug this application, thats for everything once again...Frank
0
 
LVL 1

Expert Comment

by:FranzRinkleff
Comment Utility
i submitted the following code earlier.  It works for me.  so it should work for you as well.  If i don't select something it shows an alert and does not submit.  have you tried it?  if so and it does not work for you than i think you might have javascript disabled.  i am not quite sure how you disable it or enable it but it should be on your browsers internet options.  are you using netscape or internet explore.  i use internet explore but it should not matter.  

my quess if your form is not working is because you have a javascript syntax error.  if you have a syntax error and you are using internet explore in the lower left corner of the browser you will see a little yellow icon that looks like a yield sign.  

anyway if you have a javascript error the page will submit because the function did not get a chance to return false.

what i would do is get your page to validate 1 field first.  once you get this to work then add validation for  the second field with the else if and so on.  perhaps you are referencing  a field wrong in your javascript function.  i did not see anyting that looked wrong.  
<html>
<head>
    <title>Untitled</title>
    <script language="JavaScript">
    <!--
         function validateMusic()
         {
              if(document.confirm.music.value == "")
              {
                   alert("Please select a type of music!");
                   return false;
              }
              else
              {
                   return true;
              }
         }
    //-->
    </script>    
</head>
<body>
<CFFORM NAME="confirm" ACTION="process.cfm" METHOD="POST" onSubmit="return validateMusic()">
    <cfselect name="music">
         <option value="">
         <option value="rock">Rock
         <option value="classical">Classical
    </cfselect>
    <input type="submit" name="submitButton" value="Submit">
</CFFORM>
</body>
</html>
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
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…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

763 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

7 Experts available now in Live!

Get 1:1 Help Now