SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast subBlue's Avatar
    Join Date
    Jun 2001
    Location
    Edinburgh, UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript validation of selector with multiple select enabled?

    I have a select box in a form which enables multiple item selection. I would like to use javascript to check that at least one item has been selected before the form is sent off.

    I have my validation script working for normal text fields, just this one is a problem.

    To add to the difficulty, i will be processing the results in PHP, which requires funny naming of multiple selection fields by having '[]' after the items name, e.g. members[]

    PHP Code:
    <form name="tester" method="post" action="test_scrap.php"  onSubmit="return validate(this)">
      <
    select name="members[]" size="4" multiple style="width:150px">
        <
    option value="4">Gregor</option>
        <
    option value="3">James</option>
        <
    option value="1">Tom</option>
      </
    select>
      <
    input type="submit" name="submit" value="Send it">
    </
    form
    And my validation script looks like (only relavent bits shown):

    PHP Code:
    function validate(formObj) {

        var 
    errors = new Array;
        var 
    ERROR_PREFIX "Form incomplete!\n\n";
        
        if (
    formObj.members[].length 1)    
            
    errors.push("You must pick the task members.");
        
        if (!
    formObj.name.value)    
            
    errors.push("You must enter the task name.");
        
        if (
    errors.length 0) {
            
    alert(ERROR_PREFIX errors.join("\n"));
            return 
    false;
        } else {
            return 
    true;
        }

    For normal input fields it's working fine, but for the multiple selection box it doesn't work I realise that having the selection box called 'members[]' is a problem when checking it with javascript, but it's neccessary to have the '[]' for PHP to interpret it as an array.

    Any ideas?

    TIA
    Last edited by subBlue; Jan 25, 2002 at 07:32.
    Become Interactive because its all gone a bit subBlue

  2. #2
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi subBlue,

    the form object is an array collection, so you can identify the various field elements in one of the following methods:
    formObj.elements['members[]']
    formObj['members[]']
    fldName = "members[]"
    formObj.elements[fldName]
    formObj[fldName]


    function validate(formObj)
    {

    var selObj = formObj['members[]']
    var retVal = false;
    for (var i = 0; i < selObj.length; i++)
    if (selObj.options[i].selected)
    retVal = true;

    return(retVal)
    }

    The above will prevent submission if nothing is selected

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  3. #3
    SitePoint Zealot Drew630's Avatar
    Join Date
    Nov 2001
    Location
    Maryland
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, when you use a multiple select, there is a property of each item called selected, a boolean value that tells if the items has been selected or not.

    One quick way to get around your problem is to have a pre-selected item in your listbox so you never have to worry about someone not selecting something. But that is no fun

    Now, in your form you have this:

    <select name="members[]" size="4" multiple style="width:150px">
    <option value="4">Gregor</option>
    <option value="3">James</option>
    <option value="1">Tom</option>
    </select>
    <input type="submit" name="submit" value="Send it">
    </form>


    What i would suggest doing in you Javacode is to rename your members[] so that there is less confusion.
    So, in your java you have this:

    function validate(formObj) {

    var errors = new Array;
    var ERROR_PREFIX = "Form incomplete!\n\n";

    if (formObj.members[].length < 1)
    errors.push("You must pick the task members.");

    if (!formObj.name.value)
    errors.push("You must enter the task name.");

    if (errors.length > 0) {
    alert(ERROR_PREFIX + errors.join("\n"));
    return false;
    } else {
    return true;
    }
    }

    Make it look like this:

    function validate(formObj) {

    var errors = new Array;
    var ERROR_PREFIX = "Form incomplete!\n\n";
    var selectstmt = "members[]";
    var numOfItems = 4; // this is the number of
    // select items
    var noItems;

    for (i=1; i < numOfItems; i++) {
    if (formObj.selectstmt.options[i] == true)
    break;
    else
    noItems = true;
    }
    if (noItems == true){
    errors.push("You must pick the task members.");
    }
    if (!formObj.name.value)
    errors.push("You must enter the task name.");

    if (errors.length > 0) {
    alert(ERROR_PREFIX + errors.join("\n"));
    return false;
    } else {
    return true;
    }
    }


    Try that and post if it doesn't do the trick.


    Drew
    ~Drew

    There Is No Greater Joy Than Soaring High On The Wings Of Your Dreams, Except Maybe The Joy Of Watching A Dreamer Who Has Nowhere To Land But In The Ocean Of Reality.

  4. #4
    SitePoint Enthusiast subBlue's Avatar
    Join Date
    Jun 2001
    Location
    Edinburgh, UK
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys, got it working
    Become Interactive because its all gone a bit subBlue


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •