Results 1 to 11 of 11
  1. #1
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    austin, Texas, USA
    Posts
    1,029
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A little form validation

    I have a form element -- two Radio Buttons with the same name -- and I want to put in validation to keep the form from submitting if the VALUE of the Radio Button pair is nothing (== "" in javascript) -- and I'd like to set focus on the radio button group as well. However, I can't get the thing to fire. Is there an issue with addressing Radio Button groups? I'd think there would be because it's not clear how you set focus to a group; if that's a problem I can let it pass but I can't get the script to do anything one way or the code <font color=red>(form.Par_Fam_In_Agreement.value == "")</font color=red> with respect to the firing an event. No problems with text boxes and drop-downs, tho.

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: A little form validation

    Think of them as checkboxes and interrogate whether any are "checked". If there's only two:

    if ((document.form.radio[0].checked != true) && (document.form.radio[1].checked != true))
    {
    alert("pick a button, any button");
    return (false);
    }

    As for setting focus, I think you could set focus on one of the controls individually, but I haven't tried it out.

  3. #3
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    austin, Texas, USA
    Posts
    1,029
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: A little form validation

    i don't think that'll work, simply because radio buttons are like checkboxes: unless they are checked, no value is passed and you can't validate for them. I tried to do this using the following code: <font color=blue>document.form.radio(20).checked != True</font color=blue> and nothing happened. perhaps I am missing something here as in the right way to reference a form element in the DOM syntax.

    in this case, I don't want to set a default. but, I thought this would be a problem and I told the person requesting this functionality that it might not be possible. i suppose this makes sense: like checkboxes, radio buttons represent optional data and you'd expect that sometimes a user wouldn't need to select one. If I replace the data element with a drop-down box I have to set a default value anyway as drop-downs don't permit a blank value as a default. so, I just put in a test line in the preview.asp page to notify the user that they have not indicated a Yes or No on the question. For my purposes, this also works.

    BTW, is there an issue using more than one javascript function for ONSUBMIT? I find that the validation code doesn't fire if I put more than one ONSUBMIT parameter in the <FORM> block.

  4. #4
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: A little form validation

    Those names were placeholders. Try this page:
    <pre><html>
    <head>
    <title>Radio Button Validation</title>
    <script>
    function frmTestVal()
    {
    if ((document.frmTest.R1[0].checked != true) &&
    (document.frmTest.R1[1].checked != true))
    {
    alert("pick a button, any button");
    return (false);
    }
    else
    {
    alert("good work, mate");
    return (false);
    }
    }
    </script>
    </head>

    <body>


    Test Validation</p>
    <form name="frmTest" method="POST" onSubmit="frmTestVal();">


    <input type="text" name="T1" size="20"></p>


    <input type="radio" name="R1" value="V1">Button One</p>


    <input type="radio" name="R1" value="V2">Button Two</p>


    <input type="submit" value="Submit" name="B1">
    <input type="reset" value="Reset" name="B2"></p>
    </form>
    </body>
    </html></pre>

    As for the number of event handlers, no, you really can't have more than one onSubmit - you just have to make it nice and complicated. <img src=/S/smile.gif border=0 alt=smile width=15 height=15>

  5. #5
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    austin, Texas, USA
    Posts
    1,029
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: A little form validation

    I tried out your solution some time ago and went on to other things to get the overall project out the door. Now that most of it is in the finishing stages, I'd like to iron out this radio button validation problem.

    Some remarks:

    I have a piece of code that evaluates for a Staffing Case Number that works and that is more important than validating the Radio Buttons but I think I should be able to do both. I think it's a matter of some nesting Ifs and conditions, etc.

    Anyhoo, one of the problems with respect to your suggestion is the radio buttons i am working with are 'true' radio button pairs, meaning, although there's two of them, then have the same NAME. This is necessary to align the form data with the underlying DB. In your suggested solution, you check for either of two different radio buttons by their names. I do have a Yes/No pair so the situation does apply in a manner.

    Anyhow, I tried this:
    <font color=d2691e>
    <script language="JavaScript">
    <! --
    function validateCaseNumber(form){
    if (form.StaffingCaseNumber.value==""){
    alert ("You must specify a Case Number to submit the data.")
    document.Initial_Staffing.StaffingCaseNumber.focus ()
    return false
    }
    if (document.Initial_Staffing.Par_Fam_In_Agreement.Ch ecked != True){
    alert ("Please specify whether Parent/Guardian/Adult Consumer is in agreement with service plan.")
    document.Initial_Staffing.Par_Fam_In_Agreement.foc us()
    return false
    }
    return true
    }

    // -->
    </SCRIPT>
    </font color=d2691e>

    As you can see, the script runs one test separately from the other and, at least, the first chunk works. I tried deleting the Staffing Form validation chunk and the Radio Button script doesn nada. So it's not just a matter of not embedding one test in another but, possibly, the system doesn't know what the heck <font color=d2691e>Par_Fam_In_Agreement</font color=d2691e> *is*. Any suggestions?

    TIA

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: A little form validation

    > you check for either of two different radio buttons by their names

    Not so, I treat two radio buttons with the same name as a zero-based array; notice the bracketed array counter after the button name. Here, I'll make it bigger and easier to see:

    <big>if ((document.frmTest.R1[0].checked != true) &&
    (document.frmTest.R1[1].checked != true))</big>

    ...

    <big>

    <input type="radio" name="R1" value="V1">Button One</p>


    <input type="radio" name="R1" value="V2">Button Two</p></big>

    Believe me now? <img src=/S/wink.gif border=0 alt=wink width=15 height=15>

  7. #7
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    austin, Texas, USA
    Posts
    1,029
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: A little form validation

    ok, smart guy...

    I guess I shouldn't try to read code late in the day.

    BUT I can't get the vefication code on the radio buttons to work and there's small little detail-ey things that seem to make a big difference. Anything I try to do re. the radio buttons gives me a little Caution-Triangle 'Error on page' notice and the script doesn't work. I tried a variety of things but here's the detail-ey things that are puzzling.

    WORKING VERFICATION - a text box:

    <font color=d2691e>
    <script language="JavaScript">
    <! --
    function validateCaseNumber(form){
    if (form.StaffingCaseNumber.value==""){
    alert ("You must specify a Case Number to submit the data.")
    document.Initial_Staffing.StaffingCaseNumber.focus ()
    return false
    }
    return true
    }
    //-- >
    </SCRIPT>
    </font color=d2691e>

    This script will ONLY fire if the POST section for the form declaration says

    <font color=d2691e>
    onsubmit = "return validateCaseNumber(this)"
    </font color=d2691e>

    Trying the simplist thing possible on the working script, viz. replacing if (form.StaffingCaseNumber.value=="") with if (form.Par_Fam_In_Agreement[0].Checked != True) still causes an error in page notice. I've also tried !== True in some iterations of testing but that didn't seem to make a difference.

    Javascript seems really tetchy with verification code and, to make things more frustrating, IE 6 refuses to refresh properly when you change the javascript -- I have to close it completely and then re-open to see any changes in the javascript. So, anyway... I feel like I am flailing around right now and it's a mystery to me why the POST statement can't be onsubmit = "validateCaseNumber();" I don't know Javascript well at all so it does get murky. Perhaps I need to be declaring a version of Javascript??

  8. #8
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: A little form validation

    You're absolutely right about needing "return validationFunctionName(this)" in the onSubmit handler; I cheated in my example by having no action parameter.

    You shouldn't need to declare a version of JavaScript for this kind of stuff.

    Not sure what you can learn from a yellow triangle. Do you have script error notifications turned on? If not, you really can't tell which line of the script is generating the error. (Well, I suppose if you ran it in the de######, maybe, I'm not sure.) It's one of the Tools>Internet Options...>Advanced settings (see below).

    Can you post the page (stripped down if needed) in a ZIP archive for further examination?
    Attached Images Attached Images

  9. #9
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    austin, Texas, USA
    Posts
    1,029
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: A little form validation

    I don't learn much from the little triangle except that IE has a problem with a script -- and, typically, the page will load and the script just doesn't fire. As far as my Advanced Settings go, unfortunately, I am in a work enviornment and downloaded IE 6 (which I don't like) and somehow the security settings on my machine don't allow me to change any of the advanced settings (like, for example, disabling Show Friendly HTTP Errors) -- so, even tho my settings are not as you indicated, i can't do anything about it.

    Anyhoo, here's a stripped-down version of the webpage. The real page has A LOT of form field elements and, depending on settings from the referring form, may or may not display a couple more sets of questions. That's why it's .asp not .html

    The stripped down page has working Verification for the Staffing Case Number that fires with an onblur() or submit() action. The two radio buttons are what I am trying to fold into the Submit() code once I can figure out how to get the page to 'see' them at all.

    thanks for your help -- i'll keep banging away on my end.
    Attached Files Attached Files

  10. #10
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    austin, Texas, USA
    Posts
    1,029
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: A little form validation

    PROGRESS

    After much fiddling about I have a working verification script for my radio buttons.

    Lessons Learned:
    1) Refer to the object on your page with document.[form name].[control name ([control array index]).[action] -- using form doesn't seem to work well.
    2) If you want to keep a submission from occurring you need to specify the POST action like so: onsubmit = "<font color=448800>return</font color=448800> validateCaseNumber();"

    Now, having figured all this out, the real fun begins: resting for the textbox AND/OR the radio buttons in the submit script with alert boxes tailored to whatever conditions apply.

    Ah well, it's a good day for it too -- almost everyone's out of the office.

  11. #11
    5 Star Lounger
    Join Date
    Jan 2001
    Location
    austin, Texas, USA
    Posts
    1,029
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: A little form validation

    PROBLEM SOLVED

    This turned out to have a lot of little details tro track, but in the end this is what I came up with:
    <font color=d2691e>
    function validateSubmit(form)
    {
    if (form.StaffingCaseNumber.value==""){
    alert ("You must specify a Case Number to submit the data.")
    document.Initial_Staffing.StaffingCaseNumber.focus ()
    return false
    }
    if ((document.Initial_Staffing.Par_Fam_In_Agreement[0].checked != true) &&
    (document.Initial_Staffing.Par_Fam_In_Agreement[1].checked != true))
    {
    alert("Please specify whether parent or family or guardian is in agreement with the service plan");
    return false
    }
    return true
    }
    </font color=d2691e>
    The script must have (form) in the function specification and the Staffing Case Number textbox must be referenced as a form.[control name] etc.; the radio buttons must be referenced as document.[control name] etc. Also the FORM declaration line must read <font color=448800>onsubmit = "return validateSubmit(this)"</font color=448800> to work. Anything else and things don't function correctly.

    If i try to set focus to the radio buttons the script fails. If I *look* at it wrong, it fails. Silly Javascript! I would like to set focus to the radio buttons because the form is really big and I can't expect people to know where to go to clear the alert box, so will keep banging away. However, it's working much better now.

    Thanks for all your help!! <img src=/S/clapping.gif border=0 alt=clapping width=19 height=23>

Posting Permissions

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