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

zip validation and printing error on page x2 submit buttons

I have a script currently in coldfusion that validates a zip code field, it checks for one if it is filled in and two if it is a five digit number.

1) check for existance
2) make sure it's five int's long...

The problem with my script is it uses a third page to validate and is hardcoded, the form is submitted, goes to zip validation page, and returns displaying an error under the text box saying either "you must enter a zip code" or "you must enter a valid zip code". If there is no error it directs the page to the right location. I needed to do it this way with CF because I have two submit buttons. The zip code page checks for errors in the zip field, checks which button was clicked, and directs the result (errors back to page/show error OR continue to page for which the button was clicked)

I am curious if there is a way with javascript to do, one display an error on the page under the text box if there is an error, or depending on which button was clicked go to that location.

My form action is handled in the onclick of the button for submitting, since there is two buttons for submitting the form.
Here is an example of my form: ...


<FORM name="MyForm" ACTION="" METHOD="post">
 <TABLE>
     <TR>
             <TD colspan="2">
                   <INPUT NAME="ZipCode" TYPE="text" VALUE="#ZipCode#" SIZE="6" MAXLENGTH="5">
             </TD>
     <TR>
             <TD colspan="2">*WANT TO DISPLAY ERROR HERE IF ANY* / *IF NO ERROR, DISPLAY DEFAULT TEXT*</TD>
     </TR>
     </TR>
            <TR><INPUT TYPE="Button" Name="Loc1" Value="Loc1" onclick="this.form.action ='MyActionPage.cfm?zip=#zip#';"></TD>
            <TR><INPUT TYPE="Button" Name="Loc2" Value="Loc2" onclick="this.form.action ='MyOtherPage.cfm?zip=#zip#';"></TD>
     </TR>
 </TABLE>
</FORM>

The reason behind me doing this is so that I can apply this to several different forms without rewritting script, I want to call this javascript as myZipValCode.js in my page and have it process certain variables. CF_CustomTag more or less. The zip code form name will always be the same. The error message will always be the same and so will the default text. What will differ from page to page is the number of buttons and the name of the buttons.

Is this possible with javascript, I said a lot but it's a simple idea. I am willing to explain better :o) if need be.

Regards,
~trail







</FORM>
0
trailblazzyr55
Asked:
trailblazzyr55
  • 3
  • 2
1 Solution
 
devicCommented:
hi trail,
here is an example:
=================
<script>
function CheckZip(obj)
{
      if(obj.ZipCode.value.match(/^[\d]{5}$/))
      {
            return true;
      }
      document.getElementById("msg").style.display="";
      return false;
}
</script>
<FORM name="MyForm" ACTION="" METHOD="post" onsubmit="return CheckZip(this)">
<TABLE>
    <TR>
            <TD colspan="2">
                  <INPUT NAME="ZipCode" TYPE="text" VALUE="#ZipCode#" SIZE="6" MAXLENGTH="5">
                          <span id=msg style="background:yellow;display:none;">ERROR:you must enter a valid zip code (XXXXX)</span>
            </TD>
    <TR>
            <TD colspan="2">*WANT TO DISPLAY ERROR HERE IF ANY* / *IF NO ERROR, DISPLAY DEFAULT TEXT*</TD>
    </TR>
    </TR>
           <TR><INPUT TYPE="submit" Name="Loc1" Value="Loc1" onclick="this.form.action ='MyActionPage.cfm?zip=#zip#';"></TD>
           <TR><INPUT TYPE="submit" Name="Loc2" Value="Loc2" onclick="this.form.action ='MyOtherPage.cfm?zip=#zip#';"></TD>
    </TR>
</TABLE>
</FORM>
0
 
trailblazzyr55Author Commented:
That works pretty well!!

I'm curious though, if I wanted text to display there as a defualt, say some little line like "Welcome to www.mysite.com" and then when there was an error, replace that text with the error text. How could I do that?

Also if I wanted two different errors.. ( for curiosity and learning)

Say no value in the textbox: display this error
or if there's a value, but not a 5 digit zip: display that error

How could I modify the script example you posted to do that?

I appreciate your help!

regards,
~trail

0
 
devicCommented:
e.g. so:
=============================
<script>
function CheckZip(obj)
{
      var msgSpan=document.getElementById("msg");
      if(obj.ZipCode.value=="")
    {
         msgSpan.innerHTML="ERROR: Please enter ZIP";
           msgSpan.style.background="yellow";
             return false;
    }    
      if(!obj.ZipCode.value.match(/^[\d]{5}$/))
    {
         msgSpan.innerHTML="ERROR:you must enter a valid zip code (XXXXX)";
           msgSpan.style.background="yellow";
             return false;

    }
    return true;
}
</script>
<FORM name="MyForm" ACTION="" METHOD="post" onsubmit="return CheckZip(this)">
<TABLE>
   <TR>
           <TD colspan="2">
                 <INPUT NAME="ZipCode" TYPE="text" VALUE="" SIZE="6" MAXLENGTH="5">
           </TD>
   <TR>
           <TD colspan="2"><span id=msg>Welcome to www.mysite.com</span></TD>
   </TR>
   </TR>
          <TR><INPUT TYPE="submit" Name="Loc1" Value="Loc1" onclick="this.form.action ='MyActionPage.cfm?zip=#zip#';"></TD>
          <TR><INPUT TYPE="submit" Name="Loc2" Value="Loc2" onclick="this.form.action ='MyOtherPage.cfm?zip=#zip#';"></TD>
   </TR>
</TABLE>
</FORM>
0
 
trailblazzyr55Author Commented:
Thanks!! That works awesome!

regards,
~trail
0
 
devicCommented:
you are welcome!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now