Validating Multiple Conditions

[maryjane9110024]

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:

    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:

    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!

[Old Pedant]

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:

<form id="myForm">
    <input name="StreetNumber" />
    ...

In which case you should probably be referencing the form:

    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.

[niralsoni]

replace && with || (and with or) in the example you have provided...

 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

[maryjane9110024]

@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:

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.

[Old Pedant]

Dunno.

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

Or the three form fields?

[maryjane9110024]

<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>

[Old Pedant]

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:

<input [COLOR="Red"]type="submit" [/COLOR]value="Search" onclick="[COLOR="Red"]return[/COLOR] validateOption1();" />

As a minor point, you don't pass any argument to the function, so the function declaration probably really ought to be

function validateOption1( )

without the PropertyAddressSearch parameter.

The code *could* be written much simpler, but it should work, as is.

[rnd me]

slight simplification:

    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...

[Old Pedant]

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...

<form action="" [COLOR="Red"]onsubmit="return validateOption1([B][I]this[/I][/B]);"[/COLOR]>
       <input name="StreetNumber" type="text" />
       <input name="StreetName" type="text" />
       <select name="City">
       ...
       </select>
       ...
       <input [COLOR="Red"]type="submit"[/COLOR] value="Search" />
</form>

And then write the function dirt simply:

function validateOption1([B][COLOR="Red"]form[/COLOR][/B])
{
    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;
}

[maryjane9110024]

Nope didn't work.

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:

<input [COLOR="Red"]type="submit" [/COLOR]value="Search" onclick="[COLOR="Red"]return[/COLOR] validateOption1();" />

As a minor point, you don't pass any argument to the function, so the function declaration probably really ought to be

function validateOption1( )

without the PropertyAddressSearch parameter.

The code *could* be written much simpler, but it should work, as is.

[maryjane9110024]

I have 5 forms on this page and they all have:

            <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.

[Old Pedant]

Then you have some cockpit error.

I create a simple *COMPLETE* test page using the code I showed and it works correctly:

<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>

[maryjane9110024]

But it doesn't work with multiple search buttons.

[Old Pedant]

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?

<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>

[maryjane9110024]

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