Solved

change javascript form validation approach to onsubmit; remove button disabling feature

Posted on 2007-11-17
17
604 Views
Last Modified: 2011-09-20
I've got a form with validation that enables the submit button after all the fields are properly populated. I'd like to change the validation so that the button is always enabled, but validation occurs only onsubmit. If a field does not pass validation, I'd like an alert for the user and I'd like the focus to move to that field. See the page and code in the snippet below. I'd like to use regular expressions wherever possible for validation. I'd like the validation to loop through all select menus on the page and test that there are no cases where selectedindex = 0. Something else to note about my form: There is a small section that is hidden by default, <div id="ChaffeeMsg" style="display:none">. The fields in this section are included in validation only if they have been toggled to visible (see function toggle (val)).
<html>

<head>
 

<title>Item Request Form</title>

<script language="javascript" src="infoCart.js"></script>
 

<link rel=StyleSheet href="bibliography.css" type="text/css">
 

<script type='text/javascript'>

  var required = 'RequestedBy,TrackingID,SchoolDiv,FromEmail,SchoolAgency,SchoolAddrStreet,SchoolAddrCity,PhoneNum,SchoolZip'.split( ',' );

  var emailRegEx = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i;
 

//------------------------------------------------------------------

  // Name: showHide

  // Role: To set the style.display of the specified element to the

  //       specified setting (i.e., none, inline, block)

  //------------------------------------------------------------------

  function showHide( id, setting ) {

    var field = document.getElementById( id );

    if ( field ) {

      field.style.display = setting;

    }

  }

  

  //------------------------------------------------------------------

  // Name: requiredCheck

  // Role: Verify that all required fields have non-blank values.

  //       Each input element should have an associated verification

  //       routine that will empty the field if the value is invalid.

  //------------------------------------------------------------------

  function requiredCheck() {

    var button = document.getElementById( 'submitBtn' );

    button.disabled = true;

    var ok = true;

    for ( var i = 0; i < required.length; i++ ) {

      var id = required[ i ];

      var field = document.getElementById( id );

      if ( field ) {

        if ( field.nodeName == 'SELECT' ) {

          ok = ( field.selectedIndex > 0 );

        } else {

          if ( field.value == '' ) {

            ok = false;

          }

        }

      } else {

        alert( 'Required field not found: "' + id + '"' );

      }

    }

    if ( ok ) {

      button.disabled = false;

    }

    return ok;

  }
 

  //------------------------------------------------------------------

  // Name: Chaffee

  // Role: Verify required selection has been made

  //------------------------------------------------------------------

  function Chaffee( obj ) {

    var button = document.getElementById( 'submitBtn' );

    if ( button && ( 'disabled' in button ) ) {

      button.disabled = !( ( obj.value == 'yes' ) && requiredCheck() );

    }

  }
 

  //------------------------------------------------------------------

  // Name: toggle

  // Role: Used to hide/display the ChaffeeMsg section based upon the

  //       radio button selection

  //------------------------------------------------------------------

  function toggle( val ) {

    var agree = document.getElementById( 'agree' ).checked;

    var button = document.getElementById( 'submitBtn' );

    if ( val == 1 ) {

      showHide( 'ChaffeeMsg', 'inline' );

      document.RequestForm.NonChaffee[1].checked = 'true';

      button.disabled = !( agree && requiredCheck() );

    } else if ( val == 2 ) {

      showHide( 'ChaffeeMsg', 'none' );

      document.RequestForm.NonChaffee[0].checked = 'true';

      requiredCheck();

    }

  }
 

//------------------------------------------------------------------

  // Name: divCheck

  // Role: Used to check/verify that the specified field has a valid

  //       school division selection

  //------------------------------------------------------------------

  function divCheck( field ) {

    if ( field.selectedIndex == 0 ) {

      alert( 'Please select a School Division.' );

      setTimeout( 'focusOn("' + field.id + '")', 10 );

    } else {

      requiredCheck();

    }

  }
 

  //------------------------------------------------------------------

  // Name: idCheck

  // Role: Used to check/verify that the specified field has a valid

  //       (i.e., numeric) identification number.

  //------------------------------------------------------------------

  function idCheck( field ) {

    var val = field.value;

    if ( val.search( /^(\d{6}$)/ ) ) {

      alert( 'Invalid id: ' + val );

      field.value = '';

      if ( 'id' in field ) {

        setTimeout( 'focusOn("' + field.id + '")', 10 );

      }

    } else {

      requiredCheck();

    }

  }

  

  //------------------------------------------------------------------

  // Name: nameCheck

  // Role: Used to check/verify that the specified field has a valid

  //       name (i.e., 2 words, separated by non-words).

  //------------------------------------------------------------------

  function nameCheck( field ) {

    var val = field.value;

    if ( val.search( /^(\w+\W+\w+)?$/ ) == -1 ) {

      alert( 'Invalid name: ' + val );

      field.value = '';

      if ( 'id' in field ) {

        setTimeout( 'focusOn("' + field.id + '")', 10 );

      }

    } else {

      requiredCheck();

    }

  }
 

  //------------------------------------------------------------------

  // Name: agencyCheck

  // Role: Used to check/verify that the specified field is populated.

  //------------------------------------------------------------------

  function agencyCheck( field ) {

    var val = field.value;

    if ( val.search( /(\w+)/ ) == -1 ) {

      alert( 'Please fill in the School/Agency field.' );

      field.value = '';

      if ( 'id' in field ) {

        setTimeout( 'focusOn("' + field.id + '")', 10 );

      }

    } else {

      requiredCheck();

    }

  }
 

  //------------------------------------------------------------------

  // Name: streetCheck

  // Role: Used to check/verify that the specified field is populated.

  //------------------------------------------------------------------

  function streetCheck( field ) {

    var val = field.value;

    if ( val.search( /\w+/ ) == -1 ) {

      alert( 'Please fill in the School street address field.' );

      field.value = '';

      if ( 'id' in field ) {

        setTimeout( 'focusOn("' + field.id + '")', 10 );

      }

    } else {

      requiredCheck();

    }

  }

//------------------------------------------------------------------

  // Name: cityCheck

  // Role: Used to check/verify that the specified field is populated.

  //------------------------------------------------------------------

  function cityCheck( field ) {

    var val = field.value;

    if ( val.search( /\w+/ ) == -1 ) {

      alert( 'Please fill in the School city field.' );

      field.value = '';

      if ( 'id' in field ) {

        setTimeout( 'focusOn("' + field.id + '")', 10 );

      }

    } else {

      requiredCheck();

    }

  }
 

  //------------------------------------------------------------------

  // Name: zipCheck

  // Role: Used to check/verify that the specified field is populated.

  //------------------------------------------------------------------

  function zipCheck( field ) {

    var val = field.value;

    if ( val.search( /^(\d{5}?$)/ ) ) {

      alert( 'Please fill in the School zip code' + val );

      field.value = '';

      if ( 'id' in field ) {

        setTimeout( 'focusOn("' + field.id + '")', 10 );

      }

    } else {

      requiredCheck();

    }

  }
 

  //------------------------------------------------------------------

  // Name: phoneCheck

  // Role: Used to check/verify that the specified field is populated

  // properly.

  //------------------------------------------------------------------

  function phoneCheck( field ) {

    var val = field.value;

    if (! val.match( /^(?:\([2-9]\d{2}\)\ ?|[2-9]\d{2}(?:\-?|\ ?))[2-9]\d{2}[- ]?\d{4}$/ ) ) {

      alert( 'Please fill in the School phone number. Use this format: ###-###-####' + val );

      field.value = '';

      if ( 'id' in field ) {

        setTimeout( 'focusOn("' + field.id + '")', 10 );

      }

    } else {

      requiredCheck();

    }

  }
 

  //------------------------------------------------------------------

  // Name: focusOn( element )

  // Role: Provide a way to delay the field.focus() request

  // Note: The Gecko engine (Mozilla, Firefox, et.al.) prior to 1.5.1

  //       may throw an uncatchable excption 'Permission denied'.

  //------------------------------------------------------------------

  function focusOn( id ){

    var field = document.getElementById( id );

    if ( field ) {

      field.focus();

      if ( field.type == 'radio' ) {

        field.checked = true;

      }

    } else {

      alert( 'Unknown document element. id = "' + id + '"' );

    }

  }

 

  //------------------------------------------------------------------

  // Name: emailCheck

  // Role: Used to check/verify that the specified field has a valid

  //       email address.

  //------------------------------------------------------------------

  function emailCheck( field ) {

    var val = field.value;

    if ( val.search( emailRegEx ) == -1 ) {

      alert( 'Invalid address: ' + val );

      field.value = '';

      if ( 'id' in field ) {

        setTimeout( 'focusOn("' + field.id + '")', 10 );

      }

    } else {

      requiredCheck();

    }

  }

</script>
 

<style type="text/css">

<!--

body {

	margin-left: 0px;

	margin-top: 0px;

	margin-right: 0 px;

	margin-bottom: 0px;

}

.white {

                color:FFFFFF

}

-->

</style>

</head>
 

<body onload="document.RequestForm.FromName.focus();">

<form name="RequestForm" action="RequestEmail.asp" method="post">

<table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="003399">

  <tr>

    <td width="83%" align="left" valign="middle"><img src="AIMVAbannerText.gif" alt="AIMVA Banner" width="750" height="100" align="middle"></td>

    <td width="17%" align="right"><img src="AIMVAlogo272.gif" alt="AIMVA Logo" width="272" height="127"></td>

  </tr>

  <tr bgcolor="#FE6732">

    <td colspan="2"><img src="trans.gif" width="200" height="8"></td>

  </tr>

</table>

<br/>

<a href="javascript:window.close()" class="closeLink">Close Cart</a><table width="909" cellpadding="4" cellspacing="3" align="center">

    <tr>

      <td height=45 colspan="8" border=1 class="tblHeader" align="center">Item Request Form</td>

    </tr>

    <tr>

      <td height=23 colspan="8">&nbsp;</td>

    </tr>

    <tr>

      <td height=5 colspan="8" bgcolor="#000066"><span class="white">Section 1 - About You </span></td>

    </tr>

    <tr>

      <td width="122" nowrap><span class="mailLabel">Your name<br/>(first last)<span style="color:red">*</span></span></td>

      <td width="105"><input name='FromName' type='text' id='RequestedBy' onBlur='nameCheck(this)' size='20' style="height:22"></td>

      <td width="118" nowrap><span class="mailLabel">Your <br>

      school/agency<span style="color:red">* </span></span></td>

      <td width="116"><input type="text" id="SchoolAgency" name="SchoolAgency" onBlur="agencyCheck(this)" size="20" style="height:22"></td>

      <td width="114"><span class="mailLabel">District/division<span style="color:red">*</span></span></td>

      <td colspan="3"><select name="SchoolDiv" class="inline" id="SchoolDiv" onBlur="divCheck(this)" style="height:22;font-size:12px">

          <option></option>

          <option value="Option1">Option 1</option>

          <option value="Option2">Option 2</option>

        </select></td>

    </tr>    <tr>

      <td nowrap><span class="mailLabel">Your email<span style="color:red">*</span></span></td>

      <td><input type="text" id="FromEmail" name="FromEmail" onChange="emailCheck(this)" size="20" style="height:22"></td>

      <td nowrap><span class="mailLabel">School mailing<br>

        address - street<span style="color:red">*</span> </span></td>

      <td><input name='SchoolAddrStreet' type='text' id='SchoolAddrStreet' onChange="streetCheck(this)" size='20' style="height:22"></td>

      <td><span class="mailLabel">School  - city<span style="color:red">*</span> </span></td>

      <td width="125"><input type="text" id="SchoolAddrCity" name="SchoolAddrCity" onChange="cityCheck(this)" size="20" style="height:22"></td>

      <td width="64" nowrap><span class="mailLabel">Zip code</span></td>

      <td width="52"><input type="text" id="SchoolZip" name="SchoolZip" size="10" onChange="zipCheck(this)" style="height:22"></td>

    </tr>

    <tr>

      <td nowrap><span class="mailLabel">School phone<br/>(###-###-####)<span style="color:red">*</span></td>

      <td><input name="Phone" type='text' id="PhoneNum" onChange="phoneCheck(this)" size='20' style="height:22"></td>

      <td nowrap><input type="hidden" name="RequestDate" value="11/17/07"><input type="hidden" id="SchoolAddrState" name="SchoolAddrState" value="Virginia"></td>

      <td>&nbsp;</td>

      <td>&nbsp;</td>

      <td colspan="3">&nbsp;</td>

    </tr>

    <tr>

      <td colspan="8"  bgcolor="#000066" nowrap><span class="white">Section 2 - About the Student</span></td>

    </tr>

    <tr>

      <td nowrap><span class="mailLabel">Student

          <br>

      tracking ID (STI)<span style="color:red">*</span></span></td>

      <td><input type="text" id="TrackingID" name="StudentTrackingID" onChange="idCheck(this)" size="21" style="height:22"></td>

      <td nowrap><span class="mailLabel">Chaffee qualified?</span></td>

      <td><table width="116" border="0" cellpadding="2" cellspacing="2">

        <tr>

          <td width="20"><input name="ChaffeeQual" type="radio" value="yes" onClick="toggle(1)"></td>

          <td width="21">yes</td>

          <td width="24"><input name="ChaffeeQual" type="radio" value="no" checked onClick="toggle(2)"></td>

          <td width="25">no</td>

        </tr>

      </table></td>

      <td><span class="mailLabel">Non-Chaffee</span></td>

      <td colspan="3"><table width="113" border="0" cellpadding="2" cellspacing="2">

        <tr>

          <td width="20"><input name="NonChaffee" type="radio" value="yes" checked onClick="toggle(2)"></td>

          <td width="21">yes</td>

          <td width="25"><input name="NonChaffee" type="radio" value="no" onClick="toggle(1)"></td>

          <td width="32">no</td>

        </tr>

      </table></td>

    </tr>
 

    <tr>

      <td height="120" colspan='4'><div id="ChaffeeMsg" style="display:none">

          <table width="511" border="0" cellpadding="2" cellspacing="2">

            <tr>

              <td width="393"><span style="color:#000099">As the designated Digital Rights Manager for this school/division, I hereby certify that the materials being requested are for a student whose IEP Team has determined has a print disability as defined under the Chaffee Copyright Amendment.</span></td>

              <td width="20" valign="top"><input name="ChaffeeAgree" id="agree" type="radio" value="yes" onClick="Chaffee(this);"></td>

              <td width="21" valign="top">yes</td>

              <td width="20" valign="top"><input name="ChaffeeAgree" type="radio" value="no" selected onClick="Chaffee(this);"></td>

              <td width="25" valign="top">no</td>

            </tr>

          </table>

        <br/>

        </div>

          <span class="mailLabel">Use the field below to request specific chapters or pages if you don't need the entire work. </span><br/>

          <textarea name="Comments" cols="60" rows="4" style="margin-top:8;margin-bottom:8"></textarea>

          <br>

          <span class="mailLabel"><span style="color:red">*</span>Required fields </span></td>

      <td colspan="1" valign="top"><br/>

          <br/>

          <input type="submit" value="Request Items" name="submitBtn" onmouseover="requiredCheck()" disabled style="margin-top:28"></td>

      <td colspan="3" valign="top"><br/>

          <br/>

        &nbsp;&nbsp;&nbsp;

        <input name="button" type="button" style="margin-top:28" onClick="delAllCookieInmCart(cartName,'/',null)" value="Remove All Items"></td>

    </tr>

    <tr>

      <td height=5 colspan="8" bgcolor="#000066"><span class="white">Section 3 - About the Item(s) </span></td>

  </table>
 
 

<table width="933" cellpadding="4" cellspacing="3"  align="center">

    <tr>

      <td width="560" align="left" height="45"><b>Item Information</b></td>

      <td width="115" align="left"><b>Select Format</b></td>

      <td width="146" align="left"><b>Need Entire Book?</b></td>

      <td width="60"></td>

    </tr>
 

    <tr>

      <td valign = "top">

<p><font size="2" color="#000000"><b>Analysis of freeway accident detection : </b></font><font size="2" color="#000000">Corby, Marion J. Saccomanno, F. Frank. Univ. of Waterloo. Dept. of Civil Engineering. Washington DC : Transportation Research Board, 1997   (Test Prep)</font>

</td>

<td valign = "top">

<font size="2" color="#000000"><select name="Format" id="Format1">

    <option></option>

    <option value="Format: Large Print">Large Print

    <option value="Format: Braille">Braille

    <option value="Format: Digital Audiotext">Digital Audiotext

    <option value="Format: e-Text">e-Text

  </select></font>

</td>

      <td valign = "top"><table width="146" border="0" cellpadding="2" cellspacing="2">

          <tr>

            <td width="22"><input name="EntireBook1" type="radio" value="yes" checked></td>

            <td width="43">yes</td>

            <td width="20"><input name="EntireBook1" type="radio" value="no"></td>

            <td width="35">no</td>

          </tr>

        </table></td>

      <td valign="top">

<INPUT TYPE="button" Value="Remove" onClick="removeIDbtn('5')">

</td>

    </tr>

    <font size="2" color="#000080">

    <tr>

      <td colspan="4">

<font size="2" color="#000080">

       <input type="hidden" name="itemsRequested" value=" 1. Analysis of freeway accident detection / Corby, Marion J. Saccomanno, F. Frank. 1997 (TA 1001.5 P7 1997) Test Prep. [5] "/>

</td>

</tr></font>

    <tr>

      <td valign = "top">

<p><font size="2" color="#000000"><b>Exploring Art : </b></font><font size="2" color="#000000">Mittler, Gene, Ph.D. Ragans, Rosalind, Ph.D. Glencoe/McGraw-Hill, 2000   (Other)</font>

</td>

<td valign = "top">

<font size="2" color="#000000"><select name="Format" id="Format2">

    <option></option>

    <option value="Format: Large Print">Large Print

    <option value="Format: Braille">Braille

    <option value="Format: Digital Audiotext">Digital Audiotext

    <option value="Format: e-Text">e-Text

  </select></font>

</td>

      <td valign = "top"><table width="146" border="0" cellpadding="2" cellspacing="2">

          <tr>

            <td width="22"><input name="EntireBook2" type="radio" value="yes" checked></td>

            <td width="43">yes</td>

            <td width="20"><input name="EntireBook2" type="radio" value="no"></td>

            <td width="35">no</td>

          </tr>

        </table></td>

      <td valign="top">

<INPUT TYPE="button" Value="Remove" onClick="removeIDbtn('78')">

</td>

    </tr>

    <font size="2" color="#000080">

    <tr>

      <td colspan="4">

<font size="2" color="#000080">

       <input type="hidden" name="itemsRequested" value=" 2. Exploring Art / Mittler, Gene, Ph.D. Ragans, Rosalind, Ph.D. 2000 Other. [78] "/>

</td>

</tr></font>

    <tr>

      <td valign = "top">

<p><font size="2" color="#000000"><b>Traffic technology review.  Annual review : </b></font><font size="2" color="#000000">Dallas TX : Haworth Press, Inc.,   (Other)</font>

</td>

<td valign = "top">

<font size="2" color="#000000"><select name="Format" id="Format3">

    <option></option>

    <option value="Format: Large Print">Large Print

    <option value="Format: Braille">Braille

    <option value="Format: Digital Audiotext">Digital Audiotext

    <option value="Format: e-Text">e-Text

  </select></font>

</td>

      <td valign = "top"><table width="146" border="0" cellpadding="2" cellspacing="2">

          <tr>

            <td width="22"><input name="EntireBook3" type="radio" value="yes" checked></td>

            <td width="43">yes</td>

            <td width="20"><input name="EntireBook3" type="radio" value="no"></td>

            <td width="35">no</td>

          </tr>

        </table></td>

      <td valign="top">

<INPUT TYPE="button" Value="Remove" onClick="removeIDbtn('50')">

</td>

    </tr>

    <font size="2" color="#000080">

    <tr>

      <td colspan="4">

<font size="2" color="#000080">

       <input type="hidden" name="itemsRequested" value=" 3. Traffic technology review.  Annual review / (W1 TR654) Other. [50] "/>

</td>

</tr></font>

</table>

</form>

</body>

</html>

Open in new window

0
Comment
Question by:GessWurker
  • 9
  • 8
17 Comments
 

Author Comment

by:GessWurker
ID: 20304385
Note: The submit button on the code snippet I uploaded should have been: <input type="submit" value="Request Items" name="submitBtn" style="margin-top:28">. I don't want the button to start out disabled.
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 20304621
Here is the script to check fields on submit without dependencies to disabled attribute of submit button.
A good idea would be to reorder the position of the required fields in the variable "required".
 

  

  //------------------------------------------------------------------

  // Name: requiredCheck

  // Role: Verify that all required fields have non-blank values.

  //       Each input element should have an associated verification

  //       routine that will empty the field if the value is invalid.

  //------------------------------------------------------------------

  function requiredCheck() {

    var ok = true;

    for ( var i = 0; i < required.length; i++ ) {

      var id = required[ i ];

      var field = document.getElementById( id );

      if ( field ) {

        if ( field.nodeName == 'SELECT' ) {

          if( field.selectedIndex < 1 ){

            alert("No selection done for: "+field.name);

            field.focus();

            return false;

          }

        } else {

          if ( field.value == '' ) {

            alert("No value entered for: "+field.name);

            field.focus();

            return false;

          }

        }

      } else {

        alert( 'Required field not found: "' + id + '"' );

      }

    }

    return true;

  }

 

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20305429
Thanks :)
0
 

Author Comment

by:GessWurker
ID: 20305465
Uh oh, Zvonko. There's a little problem. I found that the required check is not validating select menus towards the bottom of the page.  See the select menus at line 398 in the snippet I uploaded. We need to make sure these are not ignored. I have a script that maybe we can integrate into requiredCheck, but I'm not sure how. See the script :

function validateSelect(){
      for (x=0; x<document.RequestForm.elements.length;x++){
            if(document.RequestForm.elements[x].type =='select-one' && !document.RequestForm.elements[x].selectedIndex){
                  document.RequestForm.elements[x].focus();//style.backgroundColor="red";
                  alert("The highlighted drop-down menu does not have a valid option selected");
                  return false;
            }else{
           
                  document.RequestForm.elements[x].style.backgroundColor="";
            }
      }
}
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20305476
I am working now on your third variable ASP problem.
There you need this redim:
Dim itemArray()
ReDim itemArray(1,0,0)

Let me check that dropdowns in a second...
0
 

Author Comment

by:GessWurker
ID: 20305481
Note: If we can integrate that other script, I just want to set focus to the invalid drop-downs. I don't like changing colors.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20305519
I have not your script that does the remove, so my solution is to add the dropdowns to required fields:
  var required = 'RequestedBy,SchoolAgency,SchoolDiv,FromEmail,SchoolAddrStreet,SchoolAddrCity,SchoolZip,PhoneNum,TrackingID,Format1,Format2,Format3'.split( ',' );

And add the form tag like I proposed first:
<form name="RequestForm" action="RequestEmail.asp" method="post" onSubmit="return requiredCheck()" >


0
 

Author Comment

by:GessWurker
ID: 20305539
Zvonko: That won't work for me. I can't predict how many of those drop-downs at the bottom of the page will appear. They're part of a results set and I can't predict how many results will appear. That's why I thought the validateSelect script I posted could be helpful. Since it finds ALL drop-downs and and doesn't need names in order to check and make sure they're valid.
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:GessWurker
ID: 20305541
Is there no way to add a loop like this to the requiredfield check?

for (x=0; x<document.RequestForm.elements.length;x++){
            if(document.RequestForm.elements[x].type =='select-one' && !document.RequestForm.elements[x].selectedIndex){
                  document.RequestForm.elements[x].focus();
                  alert("The highlighted drop-down menu does not have a valid option selected");
                  return false;
            }
      }
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20305576
When you know the prefix of the name of the dropdowns, then that is done like this:

  var theForm = document.RequestForm;
  for(var x=1; theSel=theForm["Format"+x];x++){
     if(theSel.selectedIndex<1){
        theSel.focus();
        alert("The highlighted drop-down menu does not have a valid option selected");
        theSel.focus();
        return false;
     }
  }
0
 

Author Comment

by:GessWurker
ID: 20305587
Ok. Since I know the prefix, then this should work. However, I'm having trouble slipping it into requiredCheck(). Can you help?
0
 

Author Comment

by:GessWurker
ID: 20305607
I take it back. This works:
  function requiredCheck() {
    var ok = true;
    for ( var i = 0; i < required.length; i++ ) {
      var id = required[ i ];
      var field = document.getElementById( id );
      if ( field ) {
        if ( field.nodeName == 'SELECT' ) {
          if( field.selectedIndex < 1 ){
            alert("No selection done for: "+field.name);
            field.focus();
            return false;
          }
        } else {
          if ( field.value == '' ) {
            alert("No value entered for: "+field.name);
            field.focus();
            return false;
          }
        }
      } else {
        alert( 'Required field not found: "' + id + '"' );
      }
    }
        var theForm = document.RequestForm;
  for(var x=1; theSel=theForm["Format"+x];x++){
     if(theSel.selectedIndex<1){
        theSel.focus();
        alert("The highlighted drop-down menu does not have a valid option selected");
        theSel.focus();
        return false;
     }
  }
  }
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20305630
:)
0
 

Author Comment

by:GessWurker
ID: 20305645
Thanks again!

Any luck with the asp array combinations?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20305715
I am working on it...

Can I contact you? Can you send me an email to gmail under my member name?
0
 

Author Comment

by:GessWurker
ID: 20305790
Sent an email to two email addresses. One starting with your member name and ending with gmail and the other starting with zp and ending with arcor.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 20305814
Thanks.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now