#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    26
    Rep Power
    0

    Javascript radio button validation


    Hi,

    I've been hours trying to debug a (what-should-be) basic JS radio button validation script, and so far not a hint of a clue...

    If anyone could scan the details below and tell me what I'm missing it would be much appreciated.

    I'm not receiving any errors, but it is not validating the radio buttons and allows the user to continue when a choice has not been made.

    Thanks in advance,

    Gary Crighton


    The form is called in this way:

    <form name="application" action="/production/scripts/form.php?lang=es" method="post" onSubmit="return submitForms();">

    My validation script runs as follows:

    if ((document.application.cuota[0].checked == false)
    && (document.application.cuota[1].checked == false)
    && (document.application.cuota[2].checked == false)
    && (document.application.cuota[3].checked == false)) {
    alert (error9);
    return false;
    }

    Note1: error9 refers to a predefined variable.
    Note2: I also tried a loop - again without success.

    My HTML is:

    <tr>
    <td width="10%" bgcolor="whitesmoke"><input type="radio" name="cuota" value="A">&nbsp;</td>
    <td width="90%" bgcolor="whitesmoke"> Cuota A (18,03 mensuales) </td>
    </tr>

    <tr>
    <td bgcolor="whitesmoke"><input type="radio" name="cuota" value="B">&nbsp;</td>
    <td bgcolor="whitesmoke"> Cuota B (36,06 mensuales) </td>
    </tr>

    <tr>
    <td bgcolor="whitesmoke"><input type="radio" name="cuota" value="C">&nbsp;</td>
    <td bgcolor="whitesmoke"> Cuota C (72,12 mensuales) </td>
    </tr>

    <tr>
    <td bgcolor="whitesmoke"><input type="radio" name="cuota" value="socio preferente">&nbsp;</td>
    <td bgcolor="whitesmoke"> Socio preferente (60,10 ) </td>
    </tr>
  2. #2
  3. T-Shirt Tragic
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    886
    Rep Power
    321
    dunno what's wrong with your script .. I suspect the error may be elsewhere in your code... But here's a function that will do more or less what you want -
    Code:
    function radio_validate(formObj) {
        var isOK = false;
        for (i=0;i<formObj.elements.length;i++) {
    	currElem = formObj.elements[i]
            if (currElem.type == "radio" && currElem.checked) {
                isOK=true;
    	    break;
            }
        }
        if (!isOK) alert("You need to check a box!");
        
        return isOK;
    }
    call it like this ...
    <form action="some action" method="post" onSubmit="return radio_validate(this);">

    Hope this helps.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    26
    Rep Power
    0
    Hi Jonathon,

    Thanks for the function. It does seem to work up to a point but there are a couple of smallish related issues that perhaps you can offer some advice on:

    The script appears to check all radio buttons and returns a generic error message if the form is not completed. If possible I'd like to adapt the script to show a custom error for each group of radio buttons (see below).

    The form in question has two distinct radio button groups and the user has to check one from each group. With the function you suggest an alert is raised if both groups are left empty but not if only one of the two is completed.

    Any ideas?

    Cheers,

    Gary
  6. #4
  7. T-Shirt Tragic
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    886
    Rep Power
    321
    Ok try this -
    Code:
    <html>
    <head>
    <title></title>
    <script language="JavaScript">
    <!--
    
    
    function radio_validate() {
        args = radio_validate.arguments;
        formObj = args[0];
        var isOK = true;
        for (i=1;i<args.length;i++) {
    	elemSelected=false;
    	elems = formObj.elements[args[i]];
    	for (j=0;j<elems.length;j++) if (elems[j].checked) elemSelected=true;
    	if (!elemSelected) {
    	    isOK = false;
    	    alert("You have to select a "+args[i]);
    	}
        }
        return isOK;
    }
    
    
    
    // -->
    </script>
    </head>
    <body>
    <form onsubmit="return radio_validate(this, 'vege', 'fruit')">
    
    <p>
    Select a fruit<br>
    <input type="radio" value="orange" name="fruit"><br>
    <input type="radio" value="apple" name="fruit">
    </p>
    
    <p>
    Select a vege<br>
    <input type="radio" value="potatoe" name="vege"><br>
    <input type="radio" value="carrot" name="vege">
    </p>
    
    <p>
    <input type="submit" name="submit" value="submit">
    </p>
    </form>
    
    </body>
    </html>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    26
    Rep Power
    0
    Hi Jonathon,

    Actually, I have to complicate matters...

    I can't use the form value in the Alert because the site is in two languages and while I can switch the language for display (php), the form field values are tied to a single processor shared between the two languages and must be in Spanish (so, an English speaking user would be faced with a Spanish element in the alert).

    In the end the following code worked but is giving an error in the taskbar. It does validate but when "submit" is finally entered after all validation a pesky taskbar error displays before the user is taken to the next page. It appears to be syntax related (I think). Any ideas?

    if (document.application.cuota[0].checked == false && document.application.cuota[1].checked == false && document.application.cuota[2].checked == false && document.application.cuota[3].checked == false) {
    alert (error9);
    return false;
    }

    Thanks for your comments and help so far...

    Gary
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    I'm a bit confused - as usual - but see if this is of any use:

    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="JavaScript">

    function validateRadios(f) {
    if (!f) return;
    var currEl, radArray, e = 0;
    while (f.elements[e]) {
    currEl = f.elements[e++];
    if (currEl.type == 'radio' && currEl.name) {
    radArray = f.elements[currEl.name];
    for (var r=0; r<radArray.length; ++r) {
    if (radArray[r].checked) break;
    }
    if (r == radArray.length) {
    alert('Please check one of the "' + currEl.name + '" choices.');
    currEl.focus();
    return false;
    }
    }
    }
    return true;
    }

    </script>
    </head>
    <body>
    <form name="application" action="javascript&#58;alert('Submitted !')" method="post" onSubmit="return validateRadios(this)">
    <table><tr>
    <td width="10%" bgcolor="whitesmoke"><input type="radio" name="cuota" value="A"> </td>
    <td width="90%" bgcolor="whitesmoke"> Cuota A (18,03 mensuales) </td>
    </tr><tr>
    <td bgcolor="whitesmoke"><input type="radio" name="cuota" value="B"> </td>
    <td bgcolor="whitesmoke"> Cuota B (36,06 mensuales) </td>
    </tr><tr>
    <td bgcolor="whitesmoke"><input type="radio" name="cuota" value="C"> </td>
    <td bgcolor="whitesmoke"> Cuota C (72,12 mensuales) </td>
    </tr><tr>
    <td bgcolor="whitesmoke"><input type="radio" name="cuota" value="socio preferente"> </td>
    <td bgcolor="whitesmoke"> Socio preferente (60,10 ) </td>
    </tr><tr>
    <td width="10%" bgcolor="whitesmoke"><input type="radio" name="bastante" value="A"> </td>
    <td width="90%" bgcolor="whitesmoke"> Bastante A (18,03 mensuales) </td>
    </tr><tr>
    <td bgcolor="whitesmoke"><input type="radio" name="bastante" value="B"> </td>
    <td bgcolor="whitesmoke"> Bastante B (36,06 mensuales) </td>
    </tr><tr>
    <td bgcolor="whitesmoke"><input type="radio" name="bastante" value="C"> </td>
    <td bgcolor="whitesmoke"> Bastante C (72,12 mensuales) </td>
    </tr><tr>
    <td bgcolor="whitesmoke"><input type="radio" name="bastante" value="socio preferente"> </td>
    <td bgcolor="whitesmoke"> Bastante preferente (60,10 ) </td>
    <tr><td colspan=2><input type="submit"></td>
    </table>
    </form>
    </body>
    </html>
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    26
    Rep Power
    0
    Hi Richard,

    Thanks for taking the time, but as I pointed out in my former note I can't use either the input / radio name or value in the alert in the code - they are in Spanish but the site will be available to both English language and Spanish language users...

    The code below actually works (it validates ok), but causes an annoying taskbar error when the user has completed all fields and is clicking submit to move on to the next page. The page changes so fast that it's impossible to see what the error is :-(

    if (!document.application.cuota[0].checked &&
    !document.application.cuota[1].checked &&
    !document.application.cuota[2].checked &&
    !document.application.cuota[3].checked) {
    alert (error9);
    return false;
    }

    I've tried it with lots more brackets too! No success mind...

    Cheers,

    Gary
  14. #8
  15. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    Could the error be in your error9 code?
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Posts
    26
    Rep Power
    0
    No,

    the (error9) code refers to a variable where the error message is stored. It's tackled that way to account for the dual language errors (with the variables defined within an if / then fo the languages). And it works just dandy for the other 10 errors...

    Gary
  18. #10
  19. T-Shirt Tragic
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    886
    Rep Power
    321
    no problem just use the same code I gave before but create an associative array of error messages with the radio name as the key.. this way it doesn't matter what language the name is in.
    Code:
    <html>
    <head>
    <title></title>
    <script language="JavaScript">
    <!--
    
    errorArray = new Array();
    errorArray["ve"] = "vegetable";
    errorArray["fr"] = "fruit";
    
    function radio_validate() {
        args = radio_validate.arguments;
        formObj = args[0];
        var isOK = true;
        for (i=1;i<args.length;i++) {
    	elemSelected=false;
    	elems = formObj.elements[args[i]];
    	for (j=0;j<elems.length;j++) if (elems[j].checked) elemSelected=true;
    	if (!elemSelected) {
    	    isOK = false;
    	    alert("You have to select a "+errorArray[args[i]]);
    	}
        }
        return isOK;
    }
    
    
    
    // -->
    </script>
    </head>
    <body>
    <form onsubmit="return radio_validate(this, 've', 'fr')">
    
    <p>
    Select a fruit<br>
    <input type="radio" value="orange" name="fr"><br>
    <input type="radio" value="apple" name="fr">
    </p>
    
    <p>
    Select a vege<br>
    <input type="radio" value="potatoe" name="ve"><br>
    <input type="radio" value="carrot" name="ve">
    </p>
    
    <p>
    <input type="submit" name="submit" value="submit">
    </p>
    </form>
    
    </body>
    </html>
    As for the task bar error you were talking about I dunno what that is.. you'll have to give me more info.. It seems the script works for you and the form submits ok, what does the error say?
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    You could also, using the script I posted, go:

    alert(msg[currEl.name]);

    ...and put your error messages in an object:

    var msg = new Object();

    msg['cuota'] = (isEnglish) ?
    'Please choose one of the options from the "cuota" list.' :
    'Por favor de selectar......(OK, forgot my HS Espa&#241;ol);

    msg['bastante'] = (isEnglish) ?
    'Please choose one of the options from the "bastante" list.' :
    ....etc.

    Same idea (hashes) as Jonathon. If you can't figure out the error message, zip up the page and attach it below; could be anything...
  22. #12
  23. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Singapore
    Posts
    1
    Rep Power
    0

    Web site project


    i have some problem in doing my project and i hope some1 can help me. i am doing a survey form using radio buttons which consist of 2pages. How can i keep the radio button remains checked on the first pages when i'm doing survey form on the second pages becos whenever i review first pages of the survey form that i have done, the radio button i checked was cleared. Therefore, how can i keep the radio button remains checked? Thanks in advance......

IMN logo majestic logo threadwatch logo seochat tools logo