Validating a Select Field

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • FlashCreations
    New Member
    • Sep 2008
    • 2

    Validating a Select Field

    Hello,
    I am trying to use javascript to validate a form that has three select inputs. Here is the form:
    [HTML]<form name="select" action="main.ph p" method="post" onsubmit="retur n ValidateSelect( this)">
    <select name="one">
    <option value="0" selected="selec ted">-Select An Option-</option>
    </select>
    <select name="two">
    <option value="0" selected="selec ted">-Select An Option-</option>
    </select>
    <select name="three">
    <option value="0" selected="selec ted">-Select An Option-</option>
    </select>
    <input type="submit" value="Submit" />
    <div id="loading" style="display: none;">Loading. ..</div>
    <div id="1Error" style="display: none;">Please Select an Option for 1</div>
    <div id="2Error" style="display: none;">Please Select an Option for 2</div>
    <div id="3Error" style="display: none;">Please Select an Option for 3</div>
    </form>[/HTML]

    The Option 0 is not a valid choice and shouldn't be submitted. So I created this javascript to validate it:
    Code:
    <script type="text/javascript">
    function ValidateSelect(form)
    {
            var error=false;
    	document.getElementById('1Error').style.display = 'none';
    	document.getElementById('2Error').style.display = 'none';
    	document.getElementById('3Error').style.display = 'none';
    	
    	document.getElementById('submit').style.display = 'none';
    	document.getElementById('loading').style.display = 'block';
    	with(form)
    	{
    		if(one.value=='-1'||one.value=='0')
    		{
    			document.getElementById('1Error').style.display = 'block';
    			error=true;
    		}
    		if(two.value=='-1'||two.value=='0')
    		{
    			document.getElementById('2Error').style.display = 'block';
    			error=true;
    		}
    		if(three.value=='-1'||three.value=='0')
    		{
    			document.getElementById('3Error').style.display = 'block';
    			error=true;
    		}
    		if(error==true)
    		{
    			document.getElementById('loading').style.display = 'none';
    			document.getElementById('submit').style.display = 'block';
    			return(false);
    		}
    		else
    		{
    			return(true);
    		}
    	}
    }
    </script>
    For some reason the form submits even if the selects have options selected. I realize that there are no other options for the selects. This is because the options are added by a PHP script that is working perfectly. If my code is confusing (I am almost fluent in JS), here is some pseudo-code:
    1. When the form is submitted, hide all error messages and replace the submit button with text that says Loading...
    2. Check each select box for an actual selection (Besides the Chose an Option one or not selection at all). If the box doesn't have a selection (or has the Chose an Option one selected), display the error for that box.
    3. If there are any missing boxes, replace the loading text with the submit button and cancel the forum's submission. If not, continue with the submission of the form.

    If possible, could you please include the full code if you can determine my problem.
    Thanks Everyone!!!
  • vikraminside
    New Member
    • Sep 2008
    • 7

    #2
    Code is ok

    include name/id property for submit button.

    Alternatively use

    <input type="button" onClick="Valida teSelect()" value="Submit">

    Suggestive script changes:

    var form=document.g etElementById(' select');

    In error else block include

    form.submit;

    This should solve the issue.

    Comment

    • FlashCreations
      New Member
      • Sep 2008
      • 2

      #3
      Originally posted by vikraminside
      Code is ok

      include name/id property for submit button.

      Alternatively use

      <input type="button" onClick="Valida teSelect()" value="Submit">

      Suggestive script changes:

      var form=document.g etElementById(' select');

      In error else block include

      form.submit;

      This should solve the issue.
      Thanks!!!
      That fixed it!!!

      Comment

      Working...