Form Validation with javascript

**monkeymafia** · 11-08-2007, 04:30 AM

Hi all,

Im trying to validate my form using javascript. all is fine apart from when validating the select boxes on the form.

The rules applied to the "category" and "priority" select boxes seem to be non existent when using Internet Explorer. But its fine in Mozilla!

what am i doing wrong?

please see the validation in action to help give a better understanding:

Code:

http://www.kumar.adsl24.co.uk/Storm%20Broadband/myaccount.php

login details: username: roger password: test

here is my validation code:

Code:

function formValidator(){
    // Make quick references to our fields
    var subject = document.getElementById('subject');
    var category = document.getElementById('category');
    var priority = document.getElementById('priority');
    var telno = document.getElementById('telno');
    var email = document.getElementById('email');
    
    // Check each input in the order that it appears in the form!
    if(isEmpty(subject, "Please enter a subject")){
        if(madeSelection2(category, "Please select a Category")){
            if(madeSelection(priority, "Please select a priority")){
                if(isNumeric(telno, "Please make sure telno is numeric")){
                    if(emailValidator(email, "Please enter a valid email address")){
    return true;
                    }
                }
            }
         }
    }
    return false;
}


//This function checkes whether category from select box has been selected
function madeSelection2(elem, helperMsg){
    if(elem.value == "Category"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

//checks whether priority from select box has been selected
function madeSelection(elem, helperMsg){
    if(elem.value == "Please Select"){
        alert(helperMsg);
        elem.focus();
        return false;
    }else{
        return true;
    }
}

function isEmpty(elem, helperMsg){
    if(elem.value.length == 0){
        alert(helperMsg);
        elem.focus(); // set the focus to this input
        return false;
    }
    return true;
}

function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphabet(elem, helperMsg){
    var alphaExp = /^[a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

function isAlphanumeric(elem, helperMsg){
    var alphaExp = /^[0-9a-zA-Z]+$/;
    if(elem.value.match(alphaExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}



function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}

this is the code for the form:

Code:

<FORM onsubmit='return formValidator()' name="drop_list" action="useraccount.php" method="POST" >



<table width="660" cellpadding="0" cellspacing="0"><tr><td align=left>

<input type="hidden" name="action" value="tickets"><input type="hidden" name="id" value="new">
<table width="660" cellpadding="4" cellspacing="1" bgcolor="#3366CC">
  <tr>
    <td width="20%" bgcolor="#CAE4FF"><strong>Username</strong></td>
    <td width="80%" bgcolor="#FFFFFF"><input name="username" type="text" size="50" readonly value="<?php echo $_GET['memberid']?>"</td>
  </tr>
  <tr>
    <td width="20%" bgcolor="#CAE4FF"><strong>Subject</strong></td>
    <td width="80%" bgcolor="#FFFFFF"><input name="subject" id="subject" type="text" size="50"></td>
  </tr>
  <tr>
    <td bgcolor="#CAE4FF"><strong>Category</strong></td>
    <td bgcolor="#FFFFFF">
    
<SELECT  NAME="category" id='category' onChange="SelectSubCat();" >
<Option>Category</option>
</SELECT>&nbsp;
<SELECT NAME="SubCat" id="subcat">
<Option>SubCat</option>
</SELECT>

    </td>
  </tr>
  <tr>
    <td bgcolor="#CAE4FF"><strong>Priority</strong></td>
    <td bgcolor="#FFFFFF"><select name="priority" id="priority">
    <option>Please Select</option>
      <option>QUERY</option>
      <option>LOW</option>
      <option>MEDIUM</option>
      <option >HIGH</option>
    </select></td>
  </tr>
  <tr>
    <td bgcolor="#CAE4FF"><strong>Tel No. </strong></td>
    <td bgcolor="#FFFFFF"><input name="telno" type="text" id="telno" size="20"></td>

  </tr>
  <tr>
    <td bgcolor="#CAE4FF"><strong>E-Mail address</strong></td>
    <td bgcolor="#FFFFFF"><input name="email" type="text" id="email" size="40" /></td>
  </tr>
  <tr>
    <td colspan="2" align="center" bgcolor="#FFFFFF">
    <br><b>Message</b><br><textarea name="message" id="message" cols="100" rows="10" class="message" onchange="checkWordLen(message);"></textarea><br></td>
      </tr>
      <tr>
    <td colspan="2" align="center" bgcolor="#FFFFFF"><b>Attachment</b><br>
    <br><input name="attach" type="file" id="attach"></td>
  </tr>
  <tr>

    <td colspan="2" align="center" bgcolor="#FFFFFF"><input type="submit"  value="Create ticket" name ="submit" class="submit2"></td>
  </tr>
</table>
</form>

any help is greatly appreciated, thanks in advance!