?
Solved

Dynamic form validation

Posted on 2003-03-19
41
Medium Priority
?
414 Views
Last Modified: 2008-02-01
I have a dynamic form that gathers personalizaiton information about ceramic mugs and plates.  These plates can have many names(monograms) on them as well as charictures of people.  Not all plates have charictures, some have charictures without hair, gender, skin color, others have combonations of the three.  I made a form that works quite nicely for users to fill out this information, but becuase it is so dynamic I'm having problems writing validation for the form.   Rather than show the many diffrent failed attempts at creating this validation procedure, I think it would be more contructive if I showed the form code itself.  Again, all I need is one function (in vbscirpt or javascript) that can validate the form no matter how many diffrent combonations of text boxes, radio buttons, and select menus there are.  

The condition that needs to be met before a form "line"(or loop of the for statement) needs to be validated is that if the user has input infomration on the "monogram" or m<%=i%> text box on that line.

If the input name=<%="m"&i%> is blank then other blank elements on that line ok(no validation nessessary).

Validation should occur during form submission, other ideas are welcome though.

All form values are valid during validation EXCEPT the default values (they must change)



----------------------------------------------begining of code
<form action="linkadd.asp" method="GET" name="form1" target="_self">
<table border="1" align="center" cellpadding="0" cellspacing="0">
      <tr>
            <td>Line Position</td>
              <td>Monogram</td>
              <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
                    <td>Gender</td>
            <%end if%>
              <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                    <td>Hair Color</td>
              <%end if%>
              <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                    <td>Skin Color</td>
              <%end if%>
          </tr>
      
      <input name="productID" type="hidden"  id="productID" value="<%=(ItembyLINK.Fields.Item("ItemNumber").Value)%>">
      <input name="monogramnumber" type="hidden" id="monogramnumber" value="<%=(ItembyLINK.Fields.Item("MonogramNumber").Value)%>">
        <input name="maxmonogram" type="hidden"  id="maxmonogram" valu="<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%>">
            <%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
              <tr>
               <td><%=i%></td>
            <td><input name=<%="m"&i%> id="<%="m"&i%>" type="text" maxlength=<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%> value=""></td>
                         <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%> <label>
                          <td>
                        <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="B">
                          Boy</label>
                        </td>
                  <%else%>
                        <input type="hidden" name=<%="g"&i%> id=<%="g"&i%> value="N/A">
                  <%end if%>
                  <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                          <td><select name=<%="h"&i%> id=<%="h"&i%>>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  <%else%>
                        <input type="hidden" name=<%="h"&i%> id=<%="h"&i%> value="N/A">
                    <%end if%>
                    <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                          <td><select name=<%="s"&i%> id="<%="s"&i%>">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  <%else%>
                        <input type="hidden" name=<%="s"&i%> id=<%="s"&i%> value="N/A">
                    <%end if%>
      </tr>
      <%next%>
</table>
<p align="center">
<input name="Submit" type="Submit">
</p>
</form>
----------------------------------------------end of code
0
Comment
Question by:Coolhand2120
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 16
  • 16
  • 9
41 Comments
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8170679
Here is my attempt at that:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
//Automatic form validation
//Script courtesy of Fairfield Consulting
//www.FairfieldConsulting.com
//Author: Patrick Fairfield
//You are free to use this script free of charge as long as it is not sold to others
//Please do not remove the above credits and information.

function hasText(strFieldName,strMessage){
     var objFormField = document.forms[0].elements[strFieldName];
     var strValue = objFormField.value;
     strValue = strValue.split(" ").join("")
     if(strValue.length<1){
          alert("The value for " + strMessage + " cannot be left blank!");
          objFormField.focus();
          return false;
     }
     return true;
}
//========================================================================
function hasSelection(strFieldName,strMessage){
     var objFormField = document.forms[0].elements[strFieldName];
     if (objFormField.selectedIndex == 0){
          alert("The " + strMessage + " cannot be blank.");
          objFormField.focus() ;
          return false ;
     }
     return true;
}
//========================================================================
function checkRadioControl(strFieldName,strMessage){
     var objFormField = document.forms[0].elements[strFieldName]
     intControlLength = objFormField.length
     bolSelected = false;
     for (i=0;i<intControlLength;i++){
          if(objFormField[i].checked){
                    bolSelected = true;
                    break;
          }
     }    
     if(! bolSelected){
          alert("Please select one option for " + strMessage + "!");
          return false;
     }else{
          return true;
     }
}
//========================================================================
function validateForm(){
     var objForm = document.forms[0]
     var strControlName = ""
     for(j=0;j<objForm.elements.length;j++){
          if( objForm.elements[j].name != strControlName){
               if(objForm.elements[j].type=="text"){
                    if(!hasText(objForm.elements[j].name,objForm.elements[j].name)){
                         return false;
                    }
               }
               if(objForm.elements[j].type=="select-one"){
                    if(!hasSelection(objForm.elements[j].name,objForm.elements[j].name)){
                         return false;
                    }
               }
               if(objForm.elements[j].type=="radio"){
                    if(!checkRadioControl(objForm.elements[j].name,objForm.elements[j].name)){
                         return false;
                    }
               }
               if(objForm.elements[j].type=="checkbox"){
                    if(!checkRadioControl(objForm.elements[j].name,objForm.elements[j].name)){
                         return false;
                    }
               }
               strControlName = objForm.elements[j].name
          }
     }
     return true;
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<FORM action="http://www.FairfieldConsulting.com" method=POST  name=form1 onSubmit="return validateForm()">
<hr>
Test Text<INPUT type="text" id=txtTest name=txtTest><br>
<hr>
Test Radial
A<INPUT type="radio" id=radTest name=radTest>
B<INPUT type="radio" id=radTest name=radTest>
C<INPUT type="radio" id=radTest name=radTest><br>
<hr>
Test Checkbox
1<INPUT type="checkbox" id=chkTest name=chkTest>
2<INPUT type="checkbox" id=chkTest name=chkTest>
3<INPUT type="checkbox" id=chkTest name=chkTest><br>
<hr>
Test Select
<SELECT id=selTest name=selTest>
     <OPTION></OPTION>
     <OPTION>A</OPTION>
     <OPTION>B</OPTION>
</SELECT><br>
<hr>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</BODY>
</HTML>


Fritz the Blank
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8170766
That works great Fritz.  I only need two more things, I think they are easy.

If a monogram line is left blank, then there is no need to validate addional fields on that line.

Bonus
Second, is there a way to gather all the alerts into vars and dump them into one message durning submission rather then display the first validation error only.

You can see an example of my form here for a while:

http://4.3.218.204:8081/personalization.asp?catagory=Collectible+Family+Plates&PRODUCTID=788.F



Thanks for your help and quick response!

-Coolhand2120
0
 
LVL 2

Accepted Solution

by:
jamesyu earned 2000 total points
ID: 8170867
you do not assign default value to g<%i%>, h<%i%> and s<%i%>, So I don't know the default value for them.

You form and validation function should like this:

--- your form ----
<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return vfrm(this)">

--- your javascript ---
<script>
function isEmpty(s)
{
    return s == null || s=="";
}

function vfrm(frm)
{
 <%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
  if (!isEmpty(frm.m<%=i%>.value))
  {  // validate this line
    <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
     if (frm.g<%=i%>.value == <%=your default value%>)
        return false;
    <%end if%>
    <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
     if (frm.h<%=i%>.value == <%=your default value%>)
        return false;
    <%end if%>
    <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
     if (frm.s<%=i%>.value == <%=your default value%>)
        return false;
    <%end if%>
 
  }
 <%next%>
  // if we goes here, everything is ok
  return true;
}
<script>

James
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8170905
As far as changing the alert messages to one string, there is a way to do it easily enough. I have to take off for tonight, but I can look at this for you tomorrow. But to give you a sense of the modification that you need, take a look at this--the difference is that I add the line break at the end of each message, and build the message string up altogether:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var strAlertMessage = ""
function hasText(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      var strValue = objFormField.value;
      strValue = strValue.split(" ").join("")
      if(strValue.length<1){
            strAlertMessage = strAlertMessage + "The value for " + strMessage + " cannot be left blank! \n";
      }
}
//========================================================================
function hasSelection(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      if (objFormField.selectedIndex == 0){
            strAlertMessage = strAlertMessage + "The " + strMessage + " cannot be blank. \n";
      }
}
//========================================================================
function isDate(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      strDate = objFormField.value;
      if(strDate.length>0){
               var dateregex=/^[ ]*[0]?(\d{1,2})\/(\d{1,2})\/(\d{4,})[ ]*$/;
                var match=strDate.match(dateregex);
                if (match){
                           var tmpdate=new Date(match[3],parseInt(match[1],10)-1,match[2]);
                     if (tmpdate.getDate()==parseInt(match[2],10) && tmpdate.getFullYear()==parseInt(match[3],10) && (tmpdate.getMonth()+1)==parseInt(match[1],10)){
                        return true;
                        }
                }
    }
      strAlertMessage = strAlertMessage + "Please enter valid values for the day, month and year for " + strMessage + "!  \n";
}
//========================================================================
function checkRadioControl(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName]
      intControlLength = objFormField.length
      bolSelected = false;
      for (i=0;i<intControlLength;i++){
            if(objFormField[i].checked){
                        bolSelected = true;
                        break;
            }
      }      
      if(! bolSelected){
            strAlertMessage = strAlertMessage + "Please select one option for " + strMessage + "!  \n";
      }
}
//========================================================================
function isEmail(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName]
      var strEmail = objFormField.value;
      var bolValid = true;
      if(strEmail.length < 7){
            bolValid = false;
      }
      if(strEmail.lastIndexOf(" ") >0){
            bolValid = false;
      }
      var intLastDot = strEmail.lastIndexOf(".")
      if(intLastDot == -1 ||  strEmail.length - intLastDot >4){
            bolValid = false;
      }
      var intAt = strEmail.lastIndexOf("@")
      if(intAt == -1 ||  strEmail.length - intAt < 5){
            bolValid = false;
      }
      if(!bolValid){
            strAlertMessage = strAlertMessage + "Please enter a valid email address for " + strMessage + "! \n";
            objFormField.focus();
      }
      return bolValid;
}
//========================================================================
function validateForm(){
      hasText('txtTest','Test Text')
      isEmail('txtEmail','Test Email')
      hasText('txtDate','Test Date')
      isDate('txtDate','Test Date')
      checkRadioControl('radTest','Test ABC')
      checkRadioControl('chkTest','Test 123')
      hasSelection('selTest','Test Select')
      if(strAlertMessage !=""){
            alert(strAlertMessage);
            return false;
      }
      return true;
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<FORM action="http://www.FairfieldConsulting.com" method=POST  name=form1 onSubmit="return validateForm()">
Test Text<INPUT type="text" id=txtTest name=txtTest><br>
Test Email<INPUT type="text" id=txtEmail name=txtEmail><br>
Test Date<INPUT type="text" id=txtDate name=txtDate><br>
A<INPUT type="radio" id=radTest name=radTest>
B<INPUT type="radio" id=radTest name=radTest>
C<INPUT type="radio" id=radTest name=radTest><br>
1<INPUT type="checkbox" id=chkTest name=chkTest>
2<INPUT type="checkbox" id=chkTest name=chkTest>
3<INPUT type="checkbox" id=chkTest name=chkTest><br>
Test Select<SELECT id=selTest name=selTest>
      <OPTION></OPTION>
      <OPTION></OPTION>
      <OPTION></OPTION>
</SELECT><br>
<INPUT type="submit" value="Submit" id=submit1 name=submit1>
<INPUT type="reset" value="Reset" id=reset1 name=reset1>
</FORM>
</BODY>
</HTML>
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8170926
The problem with this second approach, however, is that it does not set focus on the offending field, and that may confuse some users who have difficulty relating the error message to the field on the page.

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8170939
As far as the other modification goes, I would need to know more. Are fields starting with m exempt? What is the relationship between the "m" fields and the other fields on that line and etc. If you would run your code, view the source, and paste it here, that would help the discussion along.

Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8171013
After see your page, I found a good solution for you.

If you show the error message in your page instead of do an alert, I think most user will like it.


--- your form ----
<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return vfrm(this)">

--- add the following anywhere you want to show the message ----
<div id=msg_div style ="COLOR: #ff3333"></div>


--- your javascript ---
<script>
function trim(inputString) {
   // Removes leading and trailing spaces from the passed string. Also removes
   // consecutive spaces and replaces it with one space. If something besides
   // a string is passed in (null, custom object, etc.) then return the input.
   if (typeof inputString != "string") { return inputString; }
   var retValue = inputString;
   var ch = retValue.substring(0, 1);
   while (ch == " ") { // Check for spaces at the beginning of the string
      retValue = retValue.substring(1, retValue.length);
      ch = retValue.substring(0, 1);
   }
   ch = retValue.substring(retValue.length-1, retValue.length);
   while (ch == " ") { // Check for spaces at the end of the string
      retValue = retValue.substring(0, retValue.length-1);
      ch = retValue.substring(retValue.length-1, retValue.length);
   }
   while (retValue.indexOf("  ") != -1) { // Note that there are two spaces in the string - look for multiple spaces within the string
      retValue = retValue.substring(0, retValue.indexOf("  ")) + retValue.substring(retValue.indexOf("  ")+1, retValue.length); // Again, there are two spaces in each of the strings
   }
   return retValue; // Return the trimmed string back to the user
} // Ends the "trim" function

function isEmpty(s)
{
   return s == null || trim(s)=="";
}

function vfrm(frm)
{
<%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
 if (!isEmpty(frm.m<%=i%>.value))
 {  // validate this line
   var msg="";
   <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
    if (!frm.g<%=i%>[0].checked && !frm.g<%=i%>[1].checked)
       msg="You should select gender for line " + i + "\n";
   <%end if%>
   <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
    if (frm.h<%=i%>.selectedIndex  == 0)
       msg="You should select hair color for line " + i + "\n";
   <%end if%>
   <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
    if (frm.s<%=i%>.selectedIndex  == 0)
       msg="You should select skin color for line " + i + "\n";
   <%end if%>
 }
<%next%>
   if (msg != ""){
       // alert (msg)
       // or you can show the mesg in the page
       
       return false;
   }
   else
       return true;
}
<script>
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8171018
Actually, don't worry about posting the code--I got it from your link. I don't have the time to test this, but it should get you started with your particular page:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var strAlertMessage = ""
function hasText(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      var strValue = objFormField.value;
      strValue = strValue.split(" ").join("")
      if(strValue.length<1){
            strAlertMessage = strAlertMessage + "The value for " + strMessage + " cannot be left blank! \n";
      }
}
//========================================================================
function hasSelection(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      if (objFormField.selectedIndex == 0){
            strAlertMessage = strAlertMessage + "The " + strMessage + " cannot be blank. \n";
      }
}
//========================================================================
function checkRadioControl(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName]
      intControlLength = objFormField.length
      bolSelected = false;
      for (i=0;i<intControlLength;i++){
            if(objFormField[i].checked){
                        bolSelected = true;
                        break;
            }
      }      
      if(! bolSelected){
            strAlertMessage = strAlertMessage + "Please select one option for " + strMessage + "!  \n";
      }
}
//========================================================================
function validateForm(){
      var objForm = document.forms[0];
      var strFieldName = "";
      var strMessage = ""
      for(i=1;i<9;i++){
            if(objForm.elements["m" + i].value !=""){
            return false;
                strFieldName = "r" + i;
                strMessage = "Gender " + i;
                  checkRadioControl(strFieldName,strMessage);
                strFieldName = "h" + i;
                strMessage = "Hair " + i;
                  hasSelection(strFieldName,strMessage);
                strFieldName = "s" + i;
                strMessage = "Skin " + i;
                  hasSelection(strFieldName,strMessage);
            }
      }


      if(strAlertMessage !=""){
            alert(strAlertMessage);
            return false;
      }
      return true;
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return validateForm()" language="javascript">
<table border="1" align="center" cellpadding="0" cellspacing="0">
      <tr>
            <td>Line Position</td>
              <td>Monogram</td>
              
                    <td>Gender</td>
            
                    <td>Hair Color</td>
              
                    <td>Skin Color</td>
              
          </tr>
      
      <input name="productID" type="hidden"  id="productID" value="788.F">
      <input name="monogramnumber" type="hidden" id="monogramnumber" value="8">
        <input name="maxmonogram" type="hidden"  id="maxmonogram" value="12">
            
              <tr>
               <td>1</td>
            <td><input name=m1 id="m1" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g1 id=g1 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g1 id=g1 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h1 id=h1>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s1 id="s1">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>2</td>
            <td><input name=m2 id="m2" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g2 id=g2 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g2 id=g2 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h2 id=h2>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s2 id="s2">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>3</td>
            <td><input name=m3 id="m3" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g3 id=g3 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g3 id=g3 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h3 id=h3>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s3 id="s3">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>4</td>
            <td><input name=m4 id="m4" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g4 id=g4 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g4 id=g4 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h4 id=h4>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s4 id="s4">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>5</td>
            <td><input name=m5 id="m5" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g5 id=g5 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g5 id=g5 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h5 id=h5>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s5 id="s5">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>6</td>
            <td><input name=m6 id="m6" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g6 id=g6 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g6 id=g6 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h6 id=h6>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s6 id="s6">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>7</td>
            <td><input name=m7 id="m7" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g7 id=g7 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g7 id=g7 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h7 id=h7>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s7 id="s7">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>8</td>
            <td><input name=m8 id="m8" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g8 id=g8 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g8 id=g8 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h8 id=h8>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s8 id="s8">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
</table>
<p align="center">
<input name="Submit" type="Submit">
</p>
</form>
</BODY>
</HTML>


Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8171022
sorry, i forget to populate the message div:


function vfrm(frm)
{
<%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
if (!isEmpty(frm.m<%=i%>.value))
{  // validate this line
  var msg="";
  <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
   if (!frm.g<%=i%>[0].checked && !frm.g<%=i%>[1].checked)
      msg="You should select gender for line " + i + "\n";
  <%end if%>
  <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
   if (frm.h<%=i%>.selectedIndex  == 0)
      msg="You should select hair color for line " + i + "\n";
  <%end if%>
  <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
   if (frm.s<%=i%>.selectedIndex  == 0)
      msg="You should select skin color for line " + i + "\n";
  <%end if%>
}
<%next%>
  if (msg != ""){
      // alert (msg)
      // or you can show the mesg in the page
      msg_div.innerText = msg;
      return false;
  }
  else
      return true;
}
<script>
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8171031
After see your page, I found a good solution for you.

If you show the error message in your page instead of do an alert, I think most user will like it.


--- your form ----
<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return vfrm(this)">

--- add the following anywhere you want to show the message ----
<div id=msg_div style ="COLOR: #ff3333"></div>


--- your javascript ---
<script>
function trim(inputString) {
  // Removes leading and trailing spaces from the passed string. Also removes
  // consecutive spaces and replaces it with one space. If something besides
  // a string is passed in (null, custom object, etc.) then return the input.
  if (typeof inputString != "string") { return inputString; }
  var retValue = inputString;
  var ch = retValue.substring(0, 1);
  while (ch == " ") { // Check for spaces at the beginning of the string
     retValue = retValue.substring(1, retValue.length);
     ch = retValue.substring(0, 1);
  }
  ch = retValue.substring(retValue.length-1, retValue.length);
  while (ch == " ") { // Check for spaces at the end of the string
     retValue = retValue.substring(0, retValue.length-1);
     ch = retValue.substring(retValue.length-1, retValue.length);
  }
  while (retValue.indexOf("  ") != -1) { // Note that there are two spaces in the string - look for multiple spaces within the string
     retValue = retValue.substring(0, retValue.indexOf("  ")) + retValue.substring(retValue.indexOf("  ")+1, retValue.length); // Again, there are two spaces in each of the strings
  }
  return retValue; // Return the trimmed string back to the user
} // Ends the "trim" function

function isEmpty(s)
{
  return s == null || trim(s)=="";
}

function vfrm(frm)
{
<%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
if (!isEmpty(frm.m<%=i%>.value))
{  // validate this line
  var msg="";
  <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
   if (!frm.g<%=i%>[0].checked && !frm.g<%=i%>[1].checked)
      msg="You should select gender for line " + i + "\n";
  <%end if%>
  <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
   if (frm.h<%=i%>.selectedIndex  == 0)
      msg="You should select hair color for line " + i + "\n";
  <%end if%>
  <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
   if (frm.s<%=i%>.selectedIndex  == 0)
      msg="You should select skin color for line " + i + "\n";
  <%end if%>
}
<%next%>
  if (msg != ""){
      // alert (msg)
      // or you can show the mesg in the page
      msg_div.innerText = msg;
      return false;
  }
  else
      return true;
}
<script>
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8171621
I'm sorry for not stating my question better.

If m1 (or m<%=i%>) <> "" then validate anything that has a 1 behind it (g1 h1 s1).  


If it will help:
There are default values you can validate against, if a select menu says "Choose" then it is default.  If a box says "N/A" then it is hidden and dosen't apear on the form ( but is still renderd for the database update as 'N/A')
N/A = OK field dosen't apear to user
Choose = user has not changed value yet


SO
if m1 <> "" and (g1 or h1 or s1 = "") then give error
if m2 <> "" and (g2 or h2 or s2 = "") then give error

if m? = "" then don't validate (user wants blank line)

This needs to be done for  each dynamic line (as few as 1 line but up to 12 lines)  

My original probelm when trying to make the validation was vbscript (all I know) complaining that the item did not exist when I tried to validate form items that were not there.  Remember the form is dynamic, sometimes fields are there sometimes fields are not.  However, the m1 m2 m3 etc are alwasy there.  All other fields (g? h? and s?) come and go depending on the item.

I like jamesyu's idea, alert message in the form is preferble.  An alert message in the same cell(s) as the form item that failed validation is even more prefreble.

jamesyu I ran your script, but I get an error as there is no variable defined to i in your messages.  You can go back to the page I refrenced earlier and try it.  I've left your script on the page.  The var I in my script is the for var that counts the line.

-Tony
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8174625
Okay, this is tested and works:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var strAlertMessage = ""
function hasText(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      var strValue = objFormField.value;
      strValue = strValue.split(" ").join("")
      if(strValue.length<1){
            strAlertMessage = strAlertMessage + "The value for " + strMessage + " cannot be left blank! \n";
      }
}
//========================================================================
function hasSelection(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      if (objFormField.selectedIndex == 0){
            strAlertMessage = strAlertMessage + "The " + strMessage + " cannot be blank. \n";
      }
}
//========================================================================
function checkRadioControl(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      intControlLength = objFormField.length;
      bolSelected = false;
      for (i=0;i<intControlLength;i++){
            if(objFormField[i].checked){
                        bolSelected = true;
                        break;
            }
      }      
      if(! bolSelected){
            strAlertMessage = strAlertMessage + "Please select one option for " + strMessage + "!  \n";
      }
}
//========================================================================
function validateForm(){
      var objForm = document.forms[0];
      var strFieldName = "";
      var strMessage = ""
      for(j=1;j<9;j++){
            if(objForm.elements["m" + j].value !=""){
                strFieldName = "g" + j;
                strMessage = "Gender " + j;
                  checkRadioControl(strFieldName,strMessage);
                strFieldName = "h" + j;
                strMessage = "Hair " + j;
                  hasSelection(strFieldName,strMessage);
                strFieldName = "s" + j;
                strMessage = "Skin " + j;
                  hasSelection(strFieldName,strMessage);
            }
      }


      if(strAlertMessage !=""){
            alert(strAlertMessage);
            return false;
      }
      return true;
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return validateForm()" language="javascript">
<table border="1" align="center" cellpadding="0" cellspacing="0">
      <tr>
            <td>Line Position</td>
              <td>Monogram</td>
              
                    <td>Gender</td>
            
                    <td>Hair Color</td>
              
                    <td>Skin Color</td>
              
          </tr>
      
      <input name="productID" type="hidden"  id="productID" value="788.F">
      <input name="monogramnumber" type="hidden" id="monogramnumber" value="8">
        <input name="maxmonogram" type="hidden"  id="maxmonogram" value="12">
            
              <tr>
               <td>1</td>
            <td><input name=m1 id="m1" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g1 id=g1 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g1 id=g1 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h1 id=h1>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s1 id="s1">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>2</td>
            <td><input name=m2 id="m2" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g2 id=g2 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g2 id=g2 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h2 id=h2>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s2 id="s2">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>3</td>
            <td><input name=m3 id="m3" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g3 id=g3 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g3 id=g3 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h3 id=h3>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s3 id="s3">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>4</td>
            <td><input name=m4 id="m4" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g4 id=g4 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g4 id=g4 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h4 id=h4>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s4 id="s4">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>5</td>
            <td><input name=m5 id="m5" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g5 id=g5 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g5 id=g5 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h5 id=h5>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s5 id="s5">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>6</td>
            <td><input name=m6 id="m6" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g6 id=g6 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g6 id=g6 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h6 id=h6>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s6 id="s6">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>7</td>
            <td><input name=m7 id="m7" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g7 id=g7 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g7 id=g7 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h7 id=h7>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s7 id="s7">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>8</td>
            <td><input name=m8 id="m8" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g8 id=g8 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g8 id=g8 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h8 id=h8>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s8 id="s8">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
</table>
<p align="center">
<input name="Submit" type="Submit">
</p>
</form>
</BODY>
</HTML>


Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8174670
Now to make it completely flexible, I have added a parameter to the validateForm() function to handle a variable number of sets of fields:

function validateForm(intCounter){
     var objForm = document.forms[0];
     var strFieldName = "";
     var strMessage = ""
     for(j=1;j<intCounter;j++){
          if(objForm.elements["m" + j].value !=""){
              strFieldName = "g" + j;
              strMessage = "Gender " + j;
               checkRadioControl(strFieldName,strMessage);
              strFieldName = "h" + j;
              strMessage = "Hair " + j;
               hasSelection(strFieldName,strMessage);
              strFieldName = "s" + j;
              strMessage = "Skin " + j;
               hasSelection(strFieldName,strMessage);
          }
     }


     if(strAlertMessage !=""){
          alert(strAlertMessage);
          return false;
     }
     return true;
}

So when you call it, you will just have to do this:

onSubmit="return validateForm( <%i%>)"

So your ASP code will pass the number of field sets to the function, and the function will handle it.

Fritz the Blank
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8175327
@jamesyu--

Your solution looks like server-side JS. That will work fine, but it will be necessary for Coolhand2120 to submit the form to the server, and if there are problems, to redirect the user to the page.


@Coolhand2120

If you want server-side validation, I can write that for you as well in such a way that it will take care of the conditional logic. What I posted above, however, does everything that you asked for.

Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8175731
@fritz_the_blank

No.

My solution is dynamically generate javascript code by "server-side ASP" code NOT "server-side JS", at the client side, it's PURE javascript, no difference to client browser(actually, client browser cann't know the javascript is STATIC or DYNAMICALLY Generated). DO NOT need to submit form to server to validate, it will validate form before submit.

We use a lot of server side code(ASP, JSP, ColdFusion) to generate client side javascript. It's useful and effective!

Believe me!


0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8175767
@jamesyu--

I apologize.

I read your code to quickly, and now I see that you are using server-side code to write out the client side javascript. I do that sort of thing all of the time to create client-side javascript arrays generated from database tables and etc.

I take my criticism back!!

So what we have here is similar. I set up a loop that will grab the number of input sets from the server as a parameter and then do the validation.

Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8179179
Showing message inside web page instead of "alert(msg)" is much user-friendly. User can find out what's wrong easily.

To do so, we usually embed an empty div tag in page, and fill message text by javascript.

--- add the following anywhere you want to show the message ----
<div id=msg_div style ="COLOR: #ff3333"></div>


--- populate msg_div if necessary ---

    if(strAlertMessage !=""){
         alert(strAlertMessage);
         return false;
    }


If possible, you can create message div tags for each line. SO the user can find out which line has problem.

James Yu
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8179192
Showing message inside web page instead of "alert(msg)" is much user-friendly. User can find out what's wrong easily.

To do so, we usually embed an empty div tag in page, and fill message text by javascript.

--- add the following anywhere you want to show the message ----
<div id=msg_div style ="COLOR: #ff3333"></div>


--- populate msg_div if necessary ---

 if (msg != ""){
     // alert (msg)
     // or you can show the mesg in the page
     msg_div.innerText = msg;
     return false;
 }
 else
     return true;


If possible, you can create message div tags for each line. SO the user can find out which line has problem.

James Yu
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8179335
But how can I set it to bring up only the div tag for which there is a problem.  There isn't a problem naming the div tab, I just don't know how to do it with javascript.  I like your server side ASP to create client side script, thats very clever, can I do it with vbscript aslo?  can I pass variables using ASP as well?  Currently I'm pulling the varables I'm having ASP assign to a form textbox.  If I can combine both your ideas into one then I'll give you both 500 points.  I need help putting it all together, I'm not to great at javascript.

-Tony
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8179626
But how can I set it to bring up only the div tag for which there is a problem.  There isn't a problem naming the div tab, I just don't know how to do it with javascript.  I like your server side ASP to create client side script, thats very clever, can I do it with vbscript aslo?  can I pass variables using ASP as well?  Currently I'm pulling the varables I'm having ASP assign to a form textbox.  If I can combine both your ideas into one then I'll give you both 500 points.  I need help putting it all together, I'm not to great at javascript.

-Tony
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8180794
1) You just have one div to hold all of the error messages--if you put it just above the form, that should be clear to the user

2) Yes, I could rewrite that code for you in VBScript. I do this sort of thing all the time when I want to create a client-side array based on a table--I use serverside VBScript to write out the client-side javascript. I don't see the advantage in this case, howerver. It actually requires more resources server-side and the code doesn't offer any advantage over the client-side only solution. Is there anything that my client-side version does not do that you need it to?

3) I am not sure what you mean about passing variables using ASP--that's what you are doing all over the page, no? You don't have to assign your variables to text boxes only--look at how I passed one of your asp variables to the my javascript function as the parameter to control the number of loops.

4) I didn't use the div idea because it does not work with ealier browsers like NS 4, but if you want to see how that would work with my attempt, here it is:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var strAlertMessage = ""
function hasText(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      var strValue = objFormField.value;
      strValue = strValue.split(" ").join("")
      if(strValue.length<1){
            strAlertMessage = strAlertMessage + "The value for " + strMessage + " cannot be left blank! \n";
      }
}
//========================================================================
function hasSelection(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      if (objFormField.selectedIndex == 0){
            strAlertMessage = strAlertMessage + "The " + strMessage + " cannot be blank. \n";
      }
}
//========================================================================
function checkRadioControl(strFieldName,strMessage){
      var objFormField = document.forms[0].elements[strFieldName];
      intControlLength = objFormField.length;
      bolSelected = false;
      for (i=0;i<intControlLength;i++){
            if(objFormField[i].checked){
                        bolSelected = true;
                        break;
            }
      }      
      if(! bolSelected){
            strAlertMessage = strAlertMessage + "Please select one option for " + strMessage + "!  \n";
      }
}
//========================================================================
function validateForm(intCounter){
      var objForm = document.forms[0];
      var strFieldName = "";
      var strMessage = ""
      for(j=1;j<intCounter;j++){
            if(objForm.elements["m" + j].value !=""){
                strFieldName = "g" + j;
                strMessage = "Gender " + j;
                  checkRadioControl(strFieldName,strMessage);
                strFieldName = "h" + j;
                strMessage = "Hair " + j;
                  hasSelection(strFieldName,strMessage);
                strFieldName = "s" + j;
                strMessage = "Skin " + j;
                  hasSelection(strFieldName,strMessage);
            }
      }


      if(strAlertMessage !=""){
            //alert(strAlertMessage);
            msg_div.innerText = strAlertMessage;
            return false;
      }
      return true;
}
//-->
</SCRIPT>

</HEAD>
<BODY>
<div id=msg_div style ="COLOR: #ff3333"></div>
<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return validateForm(<% Response.Write(i)%>)" language="javascript">
<table border="1" align="center" cellpadding="0" cellspacing="0">
      <tr>
            <td>Line Position</td>
              <td>Monogram</td>
              
                    <td>Gender</td>
            
                    <td>Hair Color</td>
              
                    <td>Skin Color</td>
              
          </tr>
      
      <input name="productID" type="hidden"  id="productID" value="788.F">
      <input name="monogramnumber" type="hidden" id="monogramnumber" value="8">
        <input name="maxmonogram" type="hidden"  id="maxmonogram" value="12">
            
              <tr>
               <td>1</td>
            <td><input name=m1 id="m1" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g1 id=g1 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g1 id=g1 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h1 id=h1>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s1 id="s1">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>2</td>
            <td><input name=m2 id="m2" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g2 id=g2 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g2 id=g2 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h2 id=h2>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s2 id="s2">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>3</td>
            <td><input name=m3 id="m3" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g3 id=g3 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g3 id=g3 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h3 id=h3>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s3 id="s3">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>4</td>
            <td><input name=m4 id="m4" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g4 id=g4 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g4 id=g4 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h4 id=h4>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s4 id="s4">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>5</td>
            <td><input name=m5 id="m5" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g5 id=g5 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g5 id=g5 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h5 id=h5>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s5 id="s5">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>6</td>
            <td><input name=m6 id="m6" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g6 id=g6 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g6 id=g6 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h6 id=h6>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s6 id="s6">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>7</td>
            <td><input name=m7 id="m7" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g7 id=g7 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g7 id=g7 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h7 id=h7>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s7 id="s7">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
              <tr>
               <td>8</td>
            <td><input name=m8 id="m8" type="text" maxlength=12 value=""></td>
                          <label>
                          <td>
                        <input type="radio" name=g8 id=g8 value="G">
                          Girl</label>
                          <label>
                          <input type="radio" name=g8 id=g8 value="B">
                          Boy</label>
                        </td>
                  
                          <td><select name=h8 id=h8>
                                  <option value="None">Choose</option>
                                  <option value="Blond">Blond</option>
                                  <option value="Red">Red</option>
                                <option value="Brown">Brown</option>
                                <option value="Black">Black</option>
                        </select></td>
                  
                          <td><select name=s8 id="s8">
                                  <option value="None">Choose</option>
                                  <option value="Light">Light</option>
                                  <option value="Dark">Dark</option>
                          </select></td>
                  
      </tr>
      
</table>
<p align="center">
<input name="Submit" type="Submit">
</p>
</form>
</BODY>
</HTML>


Fritz the Blank

0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8182048
If you really wanted to generate this server side with VBScript, you would keep all of the functions that I listed as is except for validateForm() which would be this:

<%
Response.write("function validateForm(){" & VBCrLf)
Response.write("var objForm = document.forms[0];"& VBCrLf)
Response.write("var strFieldName = '';" & VBCrLf)
Response.write("var strMessage = '' & VBCrLf)
for j=1 to i
     Response.Write("if objForm.elements['m" & i & "].value !=''){" & VBCrLf)
     Response.Write("checkRadioControl(g" & i & ",'Gender');"  & VBCrLf)
     Response.Write("hasSelection(h" & i & ",'Hair');"  & VBCrLf)
     Response.Write("hasSelection(j" & i & ",'Skin');"  & VBCrLf)
    Response.Write("}")
%>


However, I see no benifit. You are just better off passing the number of loops to my other function and let it all happen client side.

Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8183158
This is the complete code for your case:

I add a new feature for you:  During the validation, the background will turn to red for <td>s w/ problem. If the user fix the problem(select something), background will become normal.

<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return vfrm(this)">
<table border="1" align="center" cellpadding="0" cellspacing="0">
     <tr>
          <td>Line Position</td>
            <td>Monogram</td>
            <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
                 <td>Gender</td>
          <%end if%>
            <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                 <td>Hair Color</td>
            <%end if%>
            <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                 <td>Skin Color</td>
            <%end if%>
        </tr>
     
     <input name="productID" type="hidden"  id="productID" value="<%=(ItembyLINK.Fields.Item("ItemNumber").Value)%>">
     <input name="monogramnumber" type="hidden" id="monogramnumber" value="<%=(ItembyLINK.Fields.Item("MonogramNumber").Value)%>">
      <input name="maxmonogram" type="hidden"  id="maxmonogram" valu="<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%>">
          <%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
            <tr>
             <td><%=i%></td>
          <td id=<%="mtd"&i%>><input name=<%="m"&i%> id="<%="m"&i%>" type="text" maxlength=<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%> value=""></td>
                     <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%> <label>
                      <td id=<%="gtd"&i%>>
                    <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="G">
                      Girl</label>
                      <label>
                       <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="B">
                       Boy</label>
                    </td>
               <%else%>
                    <input type="hidden" name=<%="g"&i%> id=<%="g"&i%> value="N/A">
               <%end if%>
               <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                       <td  id=<%="htd"&i%>><select name=<%="h"&i%> id=<%="h"&i%>>
                              <option value="None">Choose</option>
                              <option value="Blond">Blond</option>
                              <option value="Red">Red</option>
                           <option value="Brown">Brown</option>
                           <option value="Black">Black</option>
                    </select></td>
               <%else%>
                    <input type="hidden" name=<%="h"&i%> id=<%="h"&i%> value="N/A">
                  <%end if%>
                  <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                       <td id=<%="std"&i%>><select name=<%="s"&i%> id="<%="s"&i%>">
                              <option value="None">Choose</option>
                              <option value="Light">Light</option>
                              <option value="Dark">Dark</option>
                       </select></td>
               <%else%>
                    <input type="hidden" name=<%="s"&i%> id=<%="s"&i%> value="N/A">
                  <%end if%>
     </tr>
     <%next%>
</table>
<p align="center">
<div id=msg_div style ="COLOR: #ff3333"></div><br>
<input name="Submit" type="Submit">
</p>
</form>

<script>
function trim(inputString) {
 // Removes leading and trailing spaces from the passed string. Also removes
 // consecutive spaces and replaces it with one space. If something besides
 // a string is passed in (null, custom object, etc.) then return the input.
 if (typeof inputString != "string") { return inputString; }
 var retValue = inputString;
 var ch = retValue.substring(0, 1);
 while (ch == " ") { // Check for spaces at the beginning of the string
    retValue = retValue.substring(1, retValue.length);
    ch = retValue.substring(0, 1);
 }
 ch = retValue.substring(retValue.length-1, retValue.length);
 while (ch == " ") { // Check for spaces at the end of the string
    retValue = retValue.substring(0, retValue.length-1);
    ch = retValue.substring(retValue.length-1, retValue.length);
 }
 while (retValue.indexOf("  ") != -1) { // Note that there are two spaces in the string - look for multiple spaces within the string
    retValue = retValue.substring(0, retValue.indexOf("  ")) + retValue.substring(retValue.indexOf("  ")+1, retValue.length); // Again, there are two spaces in each of the strings
 }
 return retValue; // Return the trimmed string back to the user
} // Ends the "trim" function

function isEmpty(s)
{
 return s == null || trim(s)=="";
}

function vfrm(frm)
{
<%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
if (!isEmpty(frm.m<%=i%>.value))
{  // validate this line
 var msg="";
 <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
  if (!frm.g<%=i%>[0].checked && !frm.g<%=i%>[1].checked){
     msg="You should select gender for line " + i + "\n";
     frm.gtd<%=i%>.bgColor="red"
  }
  else
     frm.gtd<%=i%>.bgColor=""
 <%end if%>
 
 <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
  if (frm.h<%=i%>.selectedIndex  == 0){
     msg="You should select hair color for line " + i + "\n";
     frm.htd<%=i%>.bgColor="red"
  }
  else
     frm.htd<%=i%>.bgColor=""
<%end if%>
 
 <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
  if (frm.s<%=i%>.selectedIndex  == 0){
     msg="You should select skin color for line " + i + "\n";
     frm.std<%=i%>.bgColor="red"
  }
  else
     frm.std<%=i%>.bgColor=""
 <%end if%>
}
<%next%>
 if (msg != ""){
     msg_div.innerText = msg;
     return false;
 }
 else
     return true;
}
<script>
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8183160
This is the complete code for your case:

I add a new feature for you:  During the validation, the background will turn to red for <td>s w/ problem. If the user fix the problem(select something), background will become normal.

<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return vfrm(this)">
<table border="1" align="center" cellpadding="0" cellspacing="0">
     <tr>
          <td>Line Position</td>
            <td>Monogram</td>
            <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
                 <td>Gender</td>
          <%end if%>
            <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                 <td>Hair Color</td>
            <%end if%>
            <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                 <td>Skin Color</td>
            <%end if%>
        </tr>
     
     <input name="productID" type="hidden"  id="productID" value="<%=(ItembyLINK.Fields.Item("ItemNumber").Value)%>">
     <input name="monogramnumber" type="hidden" id="monogramnumber" value="<%=(ItembyLINK.Fields.Item("MonogramNumber").Value)%>">
      <input name="maxmonogram" type="hidden"  id="maxmonogram" valu="<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%>">
          <%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
            <tr>
             <td><%=i%></td>
          <td id=<%="mtd"&i%>><input name=<%="m"&i%> id="<%="m"&i%>" type="text" maxlength=<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%> value=""></td>
                     <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%> <label>
                      <td id=<%="gtd"&i%>>
                    <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="G">
                      Girl</label>
                      <label>
                       <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="B">
                       Boy</label>
                    </td>
               <%else%>
                    <input type="hidden" name=<%="g"&i%> id=<%="g"&i%> value="N/A">
               <%end if%>
               <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                       <td  id=<%="htd"&i%>><select name=<%="h"&i%> id=<%="h"&i%>>
                              <option value="None">Choose</option>
                              <option value="Blond">Blond</option>
                              <option value="Red">Red</option>
                           <option value="Brown">Brown</option>
                           <option value="Black">Black</option>
                    </select></td>
               <%else%>
                    <input type="hidden" name=<%="h"&i%> id=<%="h"&i%> value="N/A">
                  <%end if%>
                  <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                       <td id=<%="std"&i%>><select name=<%="s"&i%> id="<%="s"&i%>">
                              <option value="None">Choose</option>
                              <option value="Light">Light</option>
                              <option value="Dark">Dark</option>
                       </select></td>
               <%else%>
                    <input type="hidden" name=<%="s"&i%> id=<%="s"&i%> value="N/A">
                  <%end if%>
     </tr>
     <%next%>
</table>
<p align="center">
<div id=msg_div style ="COLOR: #ff3333"></div><br>
<input name="Submit" type="Submit">
</p>
</form>

<script>
function trim(inputString) {
 // Removes leading and trailing spaces from the passed string. Also removes
 // consecutive spaces and replaces it with one space. If something besides
 // a string is passed in (null, custom object, etc.) then return the input.
 if (typeof inputString != "string") { return inputString; }
 var retValue = inputString;
 var ch = retValue.substring(0, 1);
 while (ch == " ") { // Check for spaces at the beginning of the string
    retValue = retValue.substring(1, retValue.length);
    ch = retValue.substring(0, 1);
 }
 ch = retValue.substring(retValue.length-1, retValue.length);
 while (ch == " ") { // Check for spaces at the end of the string
    retValue = retValue.substring(0, retValue.length-1);
    ch = retValue.substring(retValue.length-1, retValue.length);
 }
 while (retValue.indexOf("  ") != -1) { // Note that there are two spaces in the string - look for multiple spaces within the string
    retValue = retValue.substring(0, retValue.indexOf("  ")) + retValue.substring(retValue.indexOf("  ")+1, retValue.length); // Again, there are two spaces in each of the strings
 }
 return retValue; // Return the trimmed string back to the user
} // Ends the "trim" function

function isEmpty(s)
{
 return s == null || trim(s)=="";
}

function vfrm(frm)
{
<%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
if (!isEmpty(frm.m<%=i%>.value))
{  // validate this line
 var msg="";
 <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
  if (!frm.g<%=i%>[0].checked && !frm.g<%=i%>[1].checked){
     msg="You should select gender for line " + i + "\n";
     frm.gtd<%=i%>.bgColor="red"
  }
  else
     frm.gtd<%=i%>.bgColor=""
 <%end if%>
 
 <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
  if (frm.h<%=i%>.selectedIndex  == 0){
     msg="You should select hair color for line " + i + "\n";
     frm.htd<%=i%>.bgColor="red"
  }
  else
     frm.htd<%=i%>.bgColor=""
<%end if%>
 
 <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
  if (frm.s<%=i%>.selectedIndex  == 0){
     msg="You should select skin color for line " + i + "\n";
     frm.std<%=i%>.bgColor="red"
  }
  else
     frm.std<%=i%>.bgColor=""
 <%end if%>
}
<%next%>
 if (msg != ""){
     msg_div.innerText = msg;
     return false;
 }
 else
     return true;
}
<script>
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8183480
Usually people use ASP(JSP, Coldfusion...) to pull data from database and generate HTML code(forms, testbox...) If they want to do something at the client side(such as validate user input before submit form...), they  use client side script(such as javascript or vbscript), usually, people write "static code". It's hard and difficult and very easy to mix-up code and confuse yourself.

Keep in mind that:
1. ASP(JSP, Coldfusion...) can not only generate HTML code. It can generate any code you want to client browser. We use them to generate HTML code as well as script code(javascript and vbscript), XML, CSS code....

2. It takes as less server resources as you generate HTML code, don't worry about it. Actually, ASP server don't know and don't care what you generate(HTML code or script code). Even I used to generate .csv text format file to client browser and force browser to download. (I do not create that .csv at server side, just generate to client directly)

3. ASP variables are only valid at server side, and client script variables are only valid at client side. You can not access them across directly. If you want to pass ASP variables to client script:

   javascript:
      <script>
         var myJSVar = <%=myASPVar%>;  // this for unmbers
         var myJSVar = "<%=myASPVar%>";  // this for strings
      </script>
   vbscript:
      <script language="vbscript">
         dim myVBVar
         myVBVar = <%=myASPVar%>  ' this for unmbers
         var myJSVar
         myVBVar = "<%=myASPVar%>" ' this for strings
      </script>

If you want to pass javascript variables back to ASP: this means that you need the user to submit some data to server
The easy way to embed a hidden input tag inside form:
      <input type=hidden name=myHiddeninput>).
Before you submit (usually in onSubmit function), you can pass your javascript or vbscript variable to hidden input tag:  
      myHiddeninput.vlaue = myJSVar
      or
      myHiddeninput.vlaue = myVBVar
Another way is call server side ASP code passover the variables to server without reload the page or submit a form. In our projects, we can go back and forth between server and client without reload the page. If interest in this topic, I can show you how to do it.
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8183490
if it helps, please let me know

James
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8184118
All right, Coolhand--

You have a variety of options from which to choose!!!

Fritz the Blank
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8185953
I can't get either example to work properly on my server.  I can't read the code well enough to debug it much, however.  

James I tried your code and had to fix a few things that were wrong.  Obvously you can't test this in my ASP insatllation so you can't debug it.  But I can't write javascript so you can see the probelm.

In your code you refer to

msg="You should select skin color for line " + i + "\n";


i a few times, Had to replace i with +"<%=i%>"+

Then the script errors saying that element gtd1 dosen't exist, so I checked the script again, you refer to an object here:

  frm.gtd<%=i%>.bgColor="red"

Am I supposed to make another form with inputs calld gtd, std, htd etc.?  I changed these values to just s, or g , or h respectively and at best, it not submit the form.

I tried your code as well Fritz with similar results surley due to my lack of knowledge.

I actualy copied the whole table and code blcok and replaced the same on my ASP page.  First it complained that there was no object m1, I changed the line


<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return validateForm(<% Response.Write(i)%>)"

to read

<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return validateForm(<%=(ItembyLINK.Fields.Item("MonogramNumber").Value)%>)" language="javascript">


I belive these return the same number, but response.write(i) didn't work for some reason.

So now it runs, but it will only submit if the form is completly empty, not quite what I was hoping for.

The DEV layer shows up, but the whole time no matter what the conditions it shows as a > and is always visible.

Was I supposed to modify somthing, again I'm sure I'm missing somthing elementry to making either script work.  The probelm might be solved faster if I had a little on-line help.  Any IM service would do.

I'm sorry if I'm being difficult guys, I'm just ignorant when it comes to javascript and I have a difficult problem that needs javascript.

-Tony
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8186330
Just to simplify a little here. What happens if you run my code from the 03/21/2003 06:11AM PST post? There is only one challenge you need to meet to make that work, and that is with the line:


<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return validateForm(<% Response.Write(i)%>)"



(<% Response.Write(i)%> needs to fill in the number of control sets that you have so that the code knows how many loops to iterate through. If you get that, the rest should be easy.

If you like, drop me an email message at the address in my profile, and I will give you a call to walk you through it.

Fritz the Blank
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8192984
This seems to do it for me!

Now I just need it in javascript too.

<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return checkform()" language="javascript">
<table border="1" align="center" cellpadding="4" cellspacing="0">
    <tr>
         <td>Line Position</td>
           <td>Monogram</td>
           <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
                <td>Gender</td>
         <%end if%>
           <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                <td>Hair Color</td>
           <%end if%>
           <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                <td>Skin Color</td>
           <%end if%>
       </tr>
    <input name="productID" type="hidden"  id="productID" value="<%=(ItembyLINK.Fields.Item("ItemNumber").Value)%>">
    <input name="monogramnumber" type="hidden" id="monogramnumber" value="<%=(ItembyLINK.Fields.Item("MonogramNumber").Value)%>">
     <input name="maxmonogram" type="hidden"  id="maxmonogram" valu="<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%>">
         <%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
           <tr>
            <td><%=i%></td>
         <td id=<%="mtd"&i%>><input name=<%="m"&i%> id="<%="m"&i%>" type="text" maxlength=<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%> value=""></td>
                    <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%> <label>
                     <td id=<%="gtd"&i%>>
                   <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="G">
                     Girl</label>
                     <label>
                      <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="B">
                      Boy</label>
                   </td>
              <%else%>
                   <input type="hidden" name=<%="g"&i%> id=<%="g"&i%> value="N/A">
              <%end if%>
              <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                   <td id=<%="htd"&i%>><select name=<%="h"&i%> id=<%="h"&i%>>
                             <option value="None">Choose</option>
                             <option value="Blond">Blond</option>
                             <option value="Red">Red</option>
                          <option value="Brown">Brown</option>
                          <option value="Black">Black</option>
                   </select></td>
              <%else%>
                   <input type="hidden" name=<%="h"&i%> id=<%="h"&i%> value="N/A">
                 <%end if%>
                 <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                      <td id=<%="std"&i%>><select name=<%="s"&i%> id="<%="s"&i%>">
                             <option value="None">Choose</option>
                             <option value="Light">Light</option>
                             <option value="Dark">Dark</option>
                      </select></td>
              <%else%>
                   <input type="hidden" name=<%="s"&i%> id=<%="s"&i%> value="N/A">
                 <%end if%>
    </tr>
    <%next%>
</table>
<p align="center">
<input name="Submit" onMouseOver="checkform()" type="Submit">
</p>
</form>
<script language="vbscript">
//check the text box//
function checkform()
  dim sendform
  //Submit form true  
  sendform = true
<%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
//Try and invalidate the form
//If loop # needs validation
      if not (document.form1.m<%=i%>.value = "") then

        <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
            //check the radio button//
            if (not (document.form1.g<%=i%>(0).checked or document.form1.g<%=i%>(1).checked)) then
                  <%="gtd"&i%>.style.backgroundcolor="#FF0000"
                  sendform = false
            else
                  <%="gtd"&i%>.style.backgroundcolor=""
            end if
            <%end if%>            
            <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
            //check the hair list box//
            if (document.form1.h<%=i%>.selectedIndex = 0) then
                  <%="htd"&i%>.style.backgroundcolor="#FF0000"
                  sendform = false
            else
                  <%="htd"&i%>.style.backgroundcolor=""
            end if  
            <%end if%>
            <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
            //check the skin list box//
            if (document.form1.s<%=i%>.selectedIndex = 0) then
                  <%="std"&i%>.style.backgroundcolor="#FF0000"
                  sendform = false
            else
                  <%="std"&i%>.style.backgroundcolor=""
            end if
            <%end if%>
      end if
<%next%>
checkform = sendform
if checkform = false then
msgbox ("You need to fill in the RED boxes on your form before you can proceed")
end if
end function
</script>
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8192991
Didn't know I could use ASP script to create client side script code.  I basied my VBScript validation on this, I also used James' idea about changing the backgroudcolor.  
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8194998
I feel pretty bummed out here. You said:

>>That works great Fritz.  I only need two more things, I think they are easy.

If a monogram line is left blank, then there is no need to validate addional fields on that line.

Bonus
Second, is there a way to gather all the alerts into vars and dump them into one message durning submission rather then display the first validation error only.<<

and that's what I gave you.

Well, at least your problem is solved.

Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8196297
See my answer below. I believe my code should work, please be noticed that I also make some changes in your <form> and <td>s. If you still have some problem, please drop me a email, I can give you my phone number if necessary.

James

-- Tony :
In your code you refer to

msg="You should select skin color for line " + i + "\n";

i a few times, Had to replace i with +"<%=i%>"+

-- James:
   You are right, we should use <%=i%>, because it is  "i" is ASP variable. Another problem I found is you should append message to msg(It's my fault), So you chould use:
       msg = msg + "You should select skin color for line " + "<%=i%>" + "\n";
   Or you can simply use:
       msg = msg + "You should select skin color for line <%=i%> \n";

-- Tony :
Then the script errors saying that element gtd1 dosen't exist, so I checked the script again, you refer to an object here:

 frm.gtd<%=i%>.bgColor="red"

Am I supposed to make another form with inputs calld gtd, std, htd etc.?  I changed these values to just s, or g , or h respectively and at best, it not submit the form.

-- James:
   frm.gtd<%=i%> is the id of your <td> tags, do not change your inputs' name(or id). Pay attention to my code, i assigned id to your <td> tags:
      <td id=<%="mtd"&i%>>  ........
      <td id=<%="gtd"&i%>>  ........
      <td id=<%="htd"&i%>>  ........
      <td id=<%="std"&i%>>  ........
   What I did was change the background color of the <td>s not <input>s


-- Tony :
<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return validateForm(<% Response.Write(i)%>)"

to read

<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return validateForm(<%=(ItembyLINK.Fields.Item("MonogramNumber").Value)%>)" language="javascript">

I belive these return the same number, but response.write(i) didn't work for some reason.

-- James:
  No, You can not use variable i here. Because i is the iterate variable of your "for loop". You can not use it before your loop stating.

0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8196462
Congratulations, you have your own version!  here is the javascript version of your code:

I don't the following code will work in vbscript or javascript
   <%="htd"&i%>.style.backgroundcolor=""
usually I suggest people to use .bgColor instead of .style.backgroundcolor

Have fun!
-- james

<script language="javascript">
//check the text box//
function checkform()
 var sendform
 //Submit form true  
 sendform = true
<%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
//Try and invalidate the form
//If loop # needs validation
     if not (document.form1.m<%=i%>.value = "") then

       <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
          //check the radio button//
          if (!(document.form1.g<%=i%>(0).checked || document.form1.g<%=i%>(1).checked))
          {
               <%="gtd"&i%>.bgColor="#FF0000"
               sendform = false
          }
          else
               <%="gtd"&i%>.bgColor=""
          end if
          <%end if%>          
          <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
          //check the hair list box//
          if (document.form1.h<%=i%>.selectedIndex = 0) then
               <%="htd"&i%>.bgColor="#FF0000"
               sendform = false
          else
               <%="htd"&i%>.bgColor=""
          end if  
          <%end if%>
          <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
          //check the skin list box//
          if (document.form1.s<%=i%>.selectedIndex = 0) then
               <%="std"&i%>.bgColor="#FF0000"
               sendform = false
          else
               <%="std"&i%>.bgColor=""
          end if
          <%end if%>
     end if
<%next%>
  checkform = sendform
  if (checkform = false)
    alert ("You need to fill in the RED boxes on your form before you can proceed")
  }
  return checkform
}
</script>
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8196502
FYI

1. this works in vbscript but not in javascript
<%="htd"&i%>.style.backgroundcolor="#FF0000"

2. this dosen't work in both vbscript and javascript
<%="htd"&i%>.style.backgroundcolor=""

3.
.bgColor is case sensitive in javascript but not in vbscript.

-- James
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8200590
Fritz, you actualy provided more help than james.  You even offerd to call and help me with my ASP.  But james just told me somthing that helped me help myself.  Your scripts are better becuase they work for a wider range of forms.  Mine was just a stupid two dementional dynamic form.  Really the only way to deal with it properly is to make the script the same exact way you make the form.  Because you helped so much I'm more than happy to give you 500 points too, just let me know how to do it Fritz.

-Tony
0
 
LVL 2

Author Comment

by:Coolhand2120
ID: 8200625
This is the FINAL FINAL FINAL code.  Changed a few things - replaced the msgbox with a div above the form.  Also made the "line" collum turn red where the error is.  Makes it so you can't submit the form wiht 0 lines.  And I think it's fairly easy to read.

Here are some dynamic examples.

http://4.3.218.204:8081/personalization.asp?catagory=Collectible+Family+Plates&PRODUCTID=788.F

http://4.3.218.204:8081/personalization.asp?catagory=Personalized+Stick+Kids&PRODUCTID=561.B

http://4.3.218.204:8081/personalization.asp?catagory=Patriotic+Serving+Ware&PRODUCTID=437.FLAG


-----------This is the ASP


<form action="linkadd.asp" method="GET" name="form1" target="_self" onSubmit="return checkform()" language="javascript">
<div align="center">You can choose from 1 to <%=cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%> names on this item.</div>
  <div align="center" id="errordiv" style="display:none;"><font size="+1">You
    forgot to fill in the <font color="#FF0000">RED</font> box(s)! Fix the form
    and try again.</font></div>
<table border="1" align="center" cellpadding="4" cellspacing="0">
    <tr>
         
      <td bgcolor="#D5CCBB"><font color="#A28D68" face="Times New Roman, Times, serif"><strong>Line
        Position</strong></font></td>
           
      <td bgcolor="#D5CCBB"><font color="#A28D68" face="Times New Roman, Times, serif"><strong>Monogram</strong></font></td>
           <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
               
      <td bgcolor="#D5CCBB"><font color="#A28D68" face="Times New Roman, Times, serif"><strong>Gender</strong></font></td>
         <%end if%>
           <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
               
      <td bgcolor="#D5CCBB"><font color="#A28D68" face="Times New Roman, Times, serif"><strong>Hair
        Color</strong></font></td>
           <%end if%>
           <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
               
      <td bgcolor="#D5CCBB"><font color="#A28D68" face="Times New Roman, Times, serif"><strong>Skin
        Color</strong></font></td>
           <%end if%>
       </tr>
    <input name="productID" type="hidden"  id="productID" value="<%=(ItembyLINK.Fields.Item("ItemNumber").Value)%>">
    <input name="monogramnumber" type="hidden" id="monogramnumber" value="<%=(ItembyLINK.Fields.Item("MonogramNumber").Value)%>">
     <input name="maxmonogram" type="hidden"  id="maxmonogram" valu="<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%>">
         <%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
           <tr>
            <td bgcolor="#FFFFFF" id=<%="xtd"&i%>><div align="center"><font color="#A28D68" face="Times New Roman, Times, serif"><strong><%=i%></strong></font></div></td>
         <td id=<%="mtd"&i%>><input name=<%="m"&i%> id="<%="m"&i%>" type="text" maxlength=<%=(ItembyLINK.Fields.Item("MaxMonogram").Value)%> value=""></td>
                    <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%> <label>
                     <td id=<%="gtd"&i%>>
                   <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="G">
                     Girl</label>
                     <label>
                      <input type="radio" name=<%="g"&i%> id=<%="g"&i%> value="B">
                      Boy</label>
                   </td>
              <%else%>
                   <input type="hidden" name=<%="g"&i%> id=<%="g"&i%> value="N/A">
              <%end if%>
              <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
                   <td id=<%="htd"&i%>><select name=<%="h"&i%> id=<%="h"&i%>>
                             <option value="None">Choose</option>
                             <option value="Blond">Blond</option>
                             <option value="Red">Red</option>
                          <option value="Brown">Brown</option>
                          <option value="Black">Black</option>
                   </select></td>
              <%else%>
                   <input type="hidden" name=<%="h"&i%> id=<%="h"&i%> value="N/A">
                 <%end if%>
                 <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
                      <td id=<%="std"&i%>><select name=<%="s"&i%> id="<%="s"&i%>">
                             <option value="None">Choose</option>
                             <option value="Light">Light</option>
                             <option value="Dark">Dark</option>
                      </select></td>
              <%else%>
                   <input type="hidden" name=<%="s"&i%> id=<%="s"&i%> value="N/A">
                 <%end if%>
    </tr>
    <%next%>
</table>
<p align="center">
<input name="Submit" type="Submit">
</p>
</form>
<script language="vbscript">
//check the text box//
function checkform()
  dim sendform
  //Submit form true  
  sendform = true
 
if (document.form1.m1.value = "") then
sendform = false
end if

<%for i=1 to cstr(ItembyLINK.Fields.Item("MonogramNumber").Value)%>
//Try and invalidate the form
//Make sure they have at least 1 monogram


//If loop # needs validation
      if not (document.form1.m<%=i%>.value = "") then
            <%="xtd"&i%>.style.backgroundcolor=""
            <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
            <%="gtd"&i%>.style.backgroundcolor=""
            <%end if%>            
            <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
            <%="htd"&i%>.style.backgroundcolor=""
            <%end if%>      
            <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
            <%="std"&i%>.style.backgroundcolor=""
            <%end if%>            
        <%if cstr(ItembyLINK.Fields.Item("GenderDriven").Value) = 1 then%>
            //Set all neutral
            //check the gender radio button//
            if (not (document.form1.g<%=i%>(0).checked or document.form1.g<%=i%>(1).checked)) then
                  <%="gtd"&i%>.style.backgroundcolor="#FF0000"
                  <%="xtd"&i%>.style.backgroundcolor="#FF0000"
                  errordiv.style.display=""
                  sendform = false
            end if
            <%end if%>            
            <%if cstr(itembyLINK.Fields.item("haircolordriven").value) = 1 then%>
            //check the hair list box//
            if (document.form1.h<%=i%>.selectedIndex = 0) then
                  <%="htd"&i%>.style.backgroundcolor="#FF0000"
                  <%="xtd"&i%>.style.backgroundcolor="#FF0000"
                  errordiv.style.display=""
                  sendform = false
            end if  
            <%end if%>
            <%if cstr(itembyLINK.Fields.item("skincolordriven").value) = 1 then%>
            //check the skin list box//
            if (document.form1.s<%=i%>.selectedIndex = 0) then
                  <%="std"&i%>.style.backgroundcolor="#FF0000"
                  <%="xtd"&i%>.style.backgroundcolor="#FF0000"
                  errordiv.style.display=""
                  sendform = false
            end if
            <%end if%>
      end if
<%next%>
checkform = sendform
end function
</script>
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8203127
I am glad to have helped. Please post a question in the JavaScript area that has the title "Points for Fritz the Blank" and once I respond, you can close that question out.

If there is anything else that I can do, please let me know.

BTW, I tried http://4.3.218.204:8081/personalization.asp?catagory=Collectible+Family+Plates&PRODUCTID=788.F with Netscape, and it let me submit an empty form!!!!

I see why as well. All of your client-side validation is in VBScript which makes this IE only. If anyone uses Netscape to use your pages, there will be no data validation.

Fritz the Blank

0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8204309
I post it again for you:

FYI

1. this works in vbscript but not in javascript
<%="htd"&i%>.style.backgroundcolor="#FF0000"

2. this dosen't work in both vbscript and javascript
<%="htd"&i%>.style.backgroundcolor=""

3.
.bgColor is case sensitive in javascript but not in vbscript.


My suggestion is use .bgColor instead of style.backgroundcolor.

Believe it or not.

BTW, I have changed your vbscript function checkform into javascript for you, does it work? I really want to know the result.

Thanks,
 
-- James
0
 
LVL 46

Expert Comment

by:fritz_the_blank
ID: 8211768
So, where are we with this? Are you going to stay with IE only validation?

Fritz the Blank
0
 
LVL 2

Expert Comment

by:jamesyu
ID: 8212110
Coolhand2120 :

I already changed your vbscript into javascript (see my previous posts), it should work in netscape. (but I do not test it)

James
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

777 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