Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts

    Javascript Form Verification Issue

    Hi guys! I try to learn languages by picking up examples and working my way through them logically, but I'm stuck on a piece of Javascript for form verification. I was wondering if you might be able to help me out.

    I'm trying to verify a form with two different types of data-- a text field and a group of radio buttons. Here's the HTML for the form, cleand up to remove some table formatting and other fluff that I don't believe is causing issues:

    Code:
    <form name="myForm" action="mailto:xxx.xxx@xxx.com" method="POST" enctype="text/plain" onsubmit="return validateForm()">
    
    <p>opName:</p>
    <p><input type="text" name="opName" length="40"></p>
    
    <p>Product:</p>
    <p><input type="radio" name="product" checked="yes" value="0" style="display: none;">
    <input type="radio" name="product" value="bert"> Bert &nbsp; 
    <input type="radio" name="product" value="ernie"> Ernie &nbsp; 
    <input type="radio" name="product" value="elmo"> Elmo</p> 
    
    <input type="submit" value="Submit">
    
    </form>
    All well and good. The form works fine for my purposes. What I'm having issues with is verification. I'm using a hidden, selected radio button with a value of "0" as a default selection for the "product" variable. Here's the code I'm trying to use to verify the form before it's submitted:

    Code:
    <script>
    
    function validateForm()
    {
    var x=document.forms["myForm"]["opName"].value;
    var y=document.forms["myForm"]["product"].value;
    
    if (x==null || x=="")
      {
      alert("You must enter your opName.");
      return false;
      }
    
    if (y=="0")
      {
      alert("You must select a product.");
      return false;
      }
    }
    
    </script>
    While the opName will validate without any issues, the product will not. Can someone point me in the right direction of what I'm doing wrong here? I've tried everything I can think of, and haven't had any luck. Any help is greatly appreciated.

    Thanks to y'all, you're always great!
    Last edited by superwookie; 01-23-2013 at 11:09 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Not even close:
    Code:
    var y=document.forms["myForm"]["product"].value;
    You can not get the value of a *GROUP* of form fields of any kind like that. Whether radio buttons, check boxes, or even same-named text fields.

    For radio buttons and checkboxes, you can write a function such as this:
    Code:
    function getGroupValue( group )
    {
        if ( group.length == null ) 
        {
            // just in case it's actually *not* a group:
            return group.checked ? group.value : "";
        }
        // for true groups:
        var val = "";
        for ( var g = 0; g < group.length; ++g )
        {
            if ( group[g].checked ) { val += "," + group[g].value; }
        }
        if ( val != "" ) val = val.substring(1);
        return val;
    }
    For radio buttons, that will return "" if none are checked and the value of the one checked if one is.

    For checkboxes, that will return "" if none are checked and a comma delimited list of value if 1 or more is checked.

    You would then invoke that via (example from your code):
    Code:
    function validateForm()
    {
        var form = document.forms["myForm"];
        var x = form.opName.value;
        var y = getGroupValue( form.product );
        ...
    Note that neither x nor y will *EVER* be null. No point in testing for it.

    Text field values, such as opName here, can not be null. They can be blank (""), but never null.

    And that getGroupValue() function, as written, can't return a null.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    superwookie (01-23-2013)

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Thanks, I didn't think I was in the right neighborhood-- just trying to come up with a quick, creative solution! I'll give your code a try and post back if I need more assistance. I appreciate the help!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    By the by, testing for opName == "" is kind of pointless.

    A user could enter a single space, just for example, and it won't == "".

    If you are going to bother to make a test, make it a useful one.

    There are tons of examples of useful form validation in this very forum. Do a quick search.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    67
    Thanks
    14
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by Old Pedant View Post
    By the by, testing for opName == "" is kind of pointless.

    A user could enter a single space, just for example, and it won't == "".
    I agree that it is in most cases. I have a special circumstance where even a space would be considered valid input for this particular field. I won't go into details, but 99.999999% of the time that rule applies. This is one time where it does not.

    If you are going to bother to make a test, make it a useful one.
    Agreed.

    There are tons of examples of useful form validation in this very forum. Do a quick search.
    I've had some luck finding some examples, but I hadn't seen anything where anyone had addressed this type of example. I was curious if someone had a way to make something even remotely close to what I was trying work. I appreciate your help!

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Oh, yeah. I know I, for example, have posted essentially that same getGroupValue code (with minor variations, to be sure) at least a dozen times in this forum. And many other members have posted similar stuff. It's here. It just might be hard to guess what keywords to use to find it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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