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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Validating Multiple Conditions

    Hi! I am trying to check and see if three fields are empty and if they are then to alert the user saying to fill in one of the three fields. I tried this:

    Code:
        if (StreetNumber.value.length == 0) {
            if (StreetName.value.length == 0) {
                if (City.value.length == 0) {
                    alert("Please enter a street number, street name, or city.");
                    StreetNumber.focus();
                    return false;
                }
            }
        }
    and this:


    Code:
        if (StreetNumber.value.length == 0 && StreetName.value.length == 0 && City.value.length == 0) {
            alert("Please enter a street number, street name, or city.");
            StreetNumber.focus();
            return false;
        }
    Neither one works. Not sure what I am doing wrong.
    Thanks in advance!
    Last edited by maryjane9110024; 09-12-2011 at 06:13 PM.
    If you never shoot for the stars, how do you expect to reach them?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Would help if you showed the HTML that this JS is referring to.

    If I were *guessing*, I'd assume you have something like this:
    Code:
    <form id="myForm">
        <input name="StreetNumber" />
        ...
    In which case you should probably be referencing the form:
    Code:
        var form = document.getElementById("myForm");
        if (   form.StreetNumber.value.length == 0 
             && form.StreetName.value.length == 0 
             && form.City.value.length == 0) 
        {
            alert("Please enter a street number, street name, or city.");
            form.StreetNumber.focus();
            return false;
        }
    But do you really consider that adequate validation?? Means that a person could enter a SINGLE SPACE into each of those form fields and you would consider them valid.

    On top of that, would it *REALLY* be okay with you if the user entered just "17" as his street number and no street name and no city??? That's what the logic of your code is saying.
    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.

  • #3
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    replace && with || (and with or) in the example you have provided...

    Code:
     if (StreetNumber.value.length == 0 || StreetName.value.length == 0 || City.value.length == 0) {
            alert("Please enter a street number, street name, or city.");
            StreetNumber.focus();
            return false;
        }
    Thanks & Regards,
    Niral Soni

  • #4
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @Old Pendent ... yes it *REALLY* is. they can enter just the street number or the street name or the city and do a search. I can't post all the code its too long. The form is 2 text boxes and a drop down list. I have the pieces in a function... Here's the complete function:

    Code:
    function validateOption1(PropertyAddressSearch) {
    
        var StreetNumber = document.getElementById('StreetNumber');
        var StreetName = document.getElementById('StreetName');
        var City = document.getElementById('City');
    
        if (StreetNumber.value.length == 0) {
            if (StreetName.value.length == 0) {
                if (City.value.length == 0) {
                    alert("Please enter a street number, street name, or city.");
                    StreetNumber.focus();
                    return false;
                }
            }
        }
    
    //    if (StreetNumber.value.length == 0 && StreetName.value.length == 0 && City.value.length == 0) {
    //        alert("Please enter a street number, street name, or city.");
    //        StreetNumber.focus();
    //        return false;
    //    }
    
        if (StreetNumber.value.length != 0) {
            if (StreetNumber.value.match(numExp)) {
            }
            else {
                alert("Please enter a valid street number.");
                StreetNumber.focus();
                return false;
            }
        }
    
    
    }
    @niralsoni ... only one field is required not all so using the OR conditional is not correct. I need to check IF 3 fields are empty to send an alert as indicated in my original post.
    Last edited by maryjane9110024; 09-12-2011 at 09:08 PM.
    If you never shoot for the stars, how do you expect to reach them?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Dunno.

    At least show the <form>...</form>?

    Or the three form fields?
    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.

  • #6
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <form id="PropertyAddressSearch" action="">
        <table>
            <tr>
                <td colspan="6"><b><span class="blue">Option One</span> Property Address Search:</b></td>
            </tr>
            <tr>
                <td>Street Number</td>
                <td>Street (Name Only)</td>
                <td>City</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>
                    <input id="StreetNumber" name="StreetNumber" type="text" /></td>
                <td>
                    <input id="StreetName" name="StreetName" type="text" /></td>
                <td>
                    <select id="City" name="City">
                        <option value="">- Please Select -</option>
                        <option value="I don't know">I don't know</option>
                        <option value="Avondale">Avondale</option>
                        <option value="Buckyeye">Buckeye</option>
                        <option value="Carefree">Carefree</option>
                        <option value="Cave Creek">Cave Creek</option>
                        <option value="Chandler">Chandler</option>
                        <option value="El Mirage">El Mirage</option>
                        <option value="Fountain Hills">Fountain Hills</option>
                        <option value="Gila Bend">Gila Bend</option>
                        <option value="Gilbert">Gilbert</option>
                        <option value="Glendale">Glendale</option>
                        <option value="Goodyear">Goodyear</option>
                        <option value="Guadalupe">Guadalupe</option>
                        <option value="Litchfield Park">Litchfield Park</option>
                        <option value="Mesa">Mesa</option>
                        <option value="Morristown">Morristown</option>
                        <option value="Paradise Valley">Paradise Valley</option>
                        <option value="Peoria">Peoria</option>
                        <option value="Phoenix">Phoenix</option>
                        <option value="Scottsdale">Scottsdale</option>
                        <option value="Sun City">Sun City</option>
                        <option value="Surprise">Surprise</option>
                        <option value="Tempe">Tempe</option>
                        <option value="Tolleson">Tolleson</option>
                        <option value="Wickenburg">Wickenburg</option>
                        <option value="Youngtown">Youngtown</option>
                    </select></td>
                <td>
                    <input id="Search1" type="button" value="Search" onclick="validateOption1();" /></td>
                <td>
                    <input id="Clear1" type="button" value="Clear" onclick="this.form.reset();" /></td>
                <td><a href="">Example</a></td>
            </tr>
            <tr>
                <td colspan="6">If you're unsure about a field, leave it blank.</td>
            </tr>
        </table>
    </form>
    If you never shoot for the stars, how do you expect to reach them?

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Code is working fine.

    The way you call it is the culprit.

    Because you call it from <input type="button"> there is *NOTHING* that causes the <form> to get submitted when the validation passes!!!

    I *THINK* that what you meant to do was this:
    Code:
    <input type="submit" value="Search" onclick="return validateOption1();" />
    As a minor point, you don't pass any argument to the function, so the function declaration probably really ought to be
    Code:
    function validateOption1( )
    without the PropertyAddressSearch parameter.

    The code *could* be written much simpler, but it should work, as is.
    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.

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,301
    Thanks
    10
    Thanked 586 Times in 567 Posts
    slight simplification:

    Code:
        var form = document.getElementById("PropertyAddressSearch");
        if ( ! form.StreetNumber.value+
               form.StreetName.value+
               form.City.value ){
            alert("Please enter a street number, street name, or city.");
            form.StreetNumber.focus();
            return false;
        }
    i don't know why i'm posting this...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Okay, even simpler.

    Get rid of the onclick on the button. And put the check where it really belongs along with getting rid of the completely unneeded id's in the <form> fields and and and...
    Code:
    <form action="" onsubmit="return validateOption1(this);">
           <input name="StreetNumber" type="text" />
           <input name="StreetName" type="text" />
           <select name="City">
           ...
           </select>
           ...
           <input type="submit" value="Search" />
    </form>
    And then write the function dirt simply:
    Code:
    function validateOption1(form)
    {
        if ( form.StreetNumber.value+form.StreetName.value+form.City.value == "" )
        {
            alert("Please enter a street number, street name, or city.");
            form.StreetNumber.focus();
            return false;
        }
        return true;
    }
    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.

  • #10
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope didn't work.

    Quote Originally Posted by Old Pedant View Post
    Code is working fine.

    The way you call it is the culprit.

    Because you call it from <input type="button"> there is *NOTHING* that causes the <form> to get submitted when the validation passes!!!

    I *THINK* that what you meant to do was this:
    Code:
    <input type="submit" value="Search" onclick="return validateOption1();" />
    As a minor point, you don't pass any argument to the function, so the function declaration probably really ought to be
    Code:
    function validateOption1( )
    without the PropertyAddressSearch parameter.

    The code *could* be written much simpler, but it should work, as is.
    If you never shoot for the stars, how do you expect to reach them?

  • #11
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have 5 forms on this page and they all have:
    Code:
                <td>
                    <input id="Search3" type="button" value="Search" onclick="validateOption3();" /></td>
                <td>
                    <input id="Clear3" type="button" value="Clear" onclick="this.form.reset();" /></td>
    syntax for the submit and clear. Only ID's are different. Why is it that 2 out of the 5 forms work perfectly fine? These are HTML controls.
    If you never shoot for the stars, how do you expect to reach them?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Then you have some cockpit error.

    I create a simple *COMPLETE* test page using the code I showed and it works correctly:
    Code:
    <html>
    <head>
    <script>
    function validateOption1(form)
    {
        if ( form.StreetNumber.value+form.StreetName.value+form.City.value == "" )
        {
            alert("Please enter a street number, street name, or city.");
            form.StreetNumber.focus();
            return false;
        }
        return true;
    }
    </script>
    </head>
    <body>
    <form action="" onsubmit="return validateOption1(this);">
           <input name="StreetNumber" type="text" />
           <input name="StreetName" type="text" />
           <select name="City">
           <option>choose</option>
           <option value="a"> city a </option>
           <option value="b"> city b </option>
           <option value="c"> city c </option>
           <option value="d"> city d </option>
           </select>
           <input type="submit" value="Search" />
    </form>
    </body>
    </html>
    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.

  • #13
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    But it doesn't work with multiple search buttons.
    If you never shoot for the stars, how do you expect to reach them?

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    It's hard to guess what you mean when you won't show us your full HTML page.

    But I'll try.

    Here I have 3 <form>s. Two are nearly identical and even use the same validation function.

    The middle one is different, on purpose, but uses a very similar validation function.

    They all work.

    How does this differ from what you have? Why don't you just give us the URL to your page so we can see it for ourselves?
    Code:
    <html>
    <head>
    <script>
    function validateOption1(form)
    {
        if ( form.StreetNumber.value+form.StreetName.value+form.City.value == "" )
        {
            alert("Please enter a street number, street name, or city.");
            form.StreetNumber.focus();
            return false;
        }
        return true;
    }
    function validateOption2(form)
    {
        if ( form.zamboni.value+form.widget.value == "" )
        {
            alert("Please enter a zamboni and a widget.");
            form.StreetNumber.focus();
            return false;
        }
        return true;
    }
    </script>
    </head>
    <body>
    <form action="" onsubmit="return validateOption1(this);">
           <input name="StreetNumber" type="text" />
           <input name="StreetName" type="text" />
           <select name="City">
           <option>choose</option>
           <option value="a"> city a </option>
           <option value="b"> city b </option>
           <option value="c"> city c </option>
           <option value="d"> city d </option>
           </select>
           <input type="submit" value="Search" />
    </form>
    <hr>
    <form action="" onsubmit="return validateOption2(this);">
           <input name="zamboni" type="text" />
           <input name="widget" type="text" />
           <input type="submit" value="Search" />
    </form>
    <hr>
    <form action="" onsubmit="return validateOption1(this);">
           <input name="StreetNumber" type="text" />
           <input name="StreetName" type="text" />
           <select name="City">
           <option>choose</option>
           <option value="x"> city x </option>
           <option value="y"> city y </option>
           <option value="z"> city z </option>
           </select>
           <input type="submit" value="Search" />
    </form>
    
    </body>
    </html>
    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.

  • #15
    New Coder
    Join Date
    Apr 2007
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I haven't figured out how to give you a url to my local pc yet. Working on that!

    The javascript file is over a 100 lines and theHTML is almost 200 lines. too much to post in a forum
    If you never shoot for the stars, how do you expect to reach them?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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