• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 290
  • Last Modified:

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

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
FrankieT77
Asked:
FrankieT77
  • 14
  • 7
  • 5
1 Solution
 
iamariCommented:
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
 
FranzRinkleffCommented:
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
 
FranzRinkleffCommented:
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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

 
FranzRinkleffCommented:
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
 
FrankieT77Author Commented:
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
 
FrankieT77Author Commented:
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
 
FrankieT77Author Commented:
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
 
iamariCommented:
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
 
FranzRinkleffCommented:
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
 
FrankieT77Author Commented:
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
 
FrankieT77Author Commented:
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
 
FrankieT77Author Commented:
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
 
FranzRinkleffCommented:
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
 
FrankieT77Author Commented:
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
 
iamariCommented:
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
 
FrankieT77Author Commented:
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
 
iamariCommented:
that wasn't Franz, and the last code I've sent really works...
0
 
FrankieT77Author Commented:
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
 
FrankieT77Author Commented:
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
 
FrankieT77Author Commented:
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
 
FrankieT77Author Commented:
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
 
iamariCommented:
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
 
FranzRinkleffCommented:
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
 
FrankieT77Author Commented:
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
 
FrankieT77Author Commented:
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
 
FranzRinkleffCommented:
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

  • 14
  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now