Form Validation

[tonynoriega]

Hello all...

How can i make this useful for multiple dropdown menus...

i tried to add another field, but it errors out...

function validateForm(){
if(document.registration_form.nhm_associate.selectedIndex==0)
{
alert("Please select YOUR name!.");
document.registration_form.nhm_associate.focus();
return false;
}
return true;
}

[rocknbil]

You can do something that makes the function "generic". Example: create a "list" (Array) for all select id's, and a corresponding list for the specific alert value to be inserted, then use a "for" loop to check them all ......

<script type="text/javascript"> 
var checkMySelects = new Array('associate_name','department'); 
var selectAlerts = new Array('associate name','associate department'); 

function validateSelect(){ 
 for (i=0;i<checkMySelects.length;i++) { 
   var selectObj = document.getElementById(checkMySelects[i]); 
   if(selectObj.selectedIndex==0){ 
    alert('Please select your ' + selectAlerts[i] + '.'); 
    selectObj.focus(); 
    return false; 
   } 
 } 
 return true; 
} 
</script> 

<form action="" onSubmit="return validateSelect();"> 
<select name="associate_name" id="associate_name"> 
 <option value="">Select</option> 
 <option value="Sir Smedly">Sir Smedly</option> 
 <option value="Professor Tank">Professor Tank</option> 
</select> 
<select name="department" id="department"> 
 <option value="">Select</option> 
 <option value="Experimental">Experimental</option> 
 <option value="Pathology">Pathology</option> 
 <option value="Morgue">Morgue</option> 
</select> 
<input type="submit" Send It"> 
</form> 

[Fotiman]

And here, I've cleaned up rocknbil's example slightly by:
1. Removing the 'new' on the array (removes the overhead of calling the constructor, and is a little more compact)
2. Instead of 2 arrays, I made 1 array that contains an object that has an id and a label property (less prone to error by modifying 1 array but not the other).
3. Added 'var' before the i variable in the for loop (avoids creating a global variable).

<script type="text/javascript">  
var formSelects = [  
  {id:'associate_name', label:'associate name'}, 
  {id:'department', label:'associate department'} 
]; 
function validateSelect() { 
  for (var i = 0; i < formSelects.length; i++) { 
    var selectObj = document.getElementById(formSelects[i].id);  
    if (selectObj.selectedIndex == 0) { 
      alert('Please select your ' + formSelects[i].label + '.'); 
      selectObj.focus(); 
      return false; 
    } 
  } 
  return true;  
}  
</script> 

[edited by: Fotiman at 2:51 pm (utc) on Oct. 31, 2007]

[tonynoriega]

Fotiman Works great. Thank you very much.

[tonynoriega]

May i piggy back on this and as how i can incorporate a function to validate an text input field?

I found a simple script, but wanted to keep them all in one .js file...

thanks

[Fotiman]

Something like this maybe:

<script type="text/javascript">  
function validateInputs() { 
  var controls = [ 
    {id:'foo', label:'Foo'}, 
    {id:'bar', label:'Bar'} 
  ]; 
  for (var i = 0; i < controls.length; i++) { 
    var c = document.getElementById(controls[i].id); 
    if (c.value.length < 1) { 
      alert('Please enter a value for ' + controls[i].label + '.'); 
      c.focus(); 
      return false; 
    } 
  } 
  return true; 
} 
function validateSelect() {  
  var controls = [  
    {id:'associate_name', label:'associate name'},  
    {id:'department', label:'associate department'}  
  ];  
  for (var i = 0; i < controls.length; i++) {  
    var c = document.getElementById(controls[i].id);  
    if (c.selectedIndex == 0) {  
      alert('Please select your ' + controls[i].label + '.');  
      c.focus();  
      return false;  
    }  
  }  
  return true;  
}  
function validateForm() { 
  // Check input values 
  if (!validateInputs()) { 
    return false; 
  } 
  // Check drop downs 
  if (!validateSelect()) { 
    return false; 
  } 
  return true; 
} 
</script>  
<form action="" onSubmit="return validateForm();">  
<div> 
<div>Foo: <input type="text" name="foo"></div> 
<div>Bar: <input type="text" name="bar"></div> 
<select name="associate_name" id="associate_name">  
 <option value="">Select</option>  
 <option value="Sir Smedly">Sir Smedly</option>  
 <option value="Professor Tank">Professor Tank</option>  
</select>  
<select name="department" id="department">  
 <option value="">Select</option>  
 <option value="Experimental">Experimental</option>  
 <option value="Pathology">Pathology</option>  
 <option value="Morgue">Morgue</option>  
</select>  
<input type="submit" value="Send It">  
</div> 
</form>  

[edited by: Fotiman at 3:37 pm (utc) on Nov. 6, 2007]