Page 1 of 1

JS Validation

Posted: Fri Apr 10, 2009 8:53 am
by SheDesigns
I can't get my validation to work for radio buttons!

I'm trying to use it like a checkbox, but it won't work.
I'm trying the getElementByID, but it won't work.

Please help :(

Code: Select all

<SCRIPT type=text/javascript>
function validateForm() {
var errors='';
if(document.application.firstname.value == "")errors+='First Name.\n'
if(document.application.lastname.value == "")errors+='Last Name.\n'
if(document.application.address.value == "")errors+='Street Address.\n'
if(document.application.city.value == "")errors+='City.\n'
if(document.application.state.value == "")errors+='State.\n'
if(document.application.zip.value == "")errors+='Zip.\n'
if(document.application.phone.value == "")errors+='Phone.\n'
if(document.application.email.value == "")errors+='Email.\n'
if(document.application.age.value == "")errors+='Age.\n'
if(document.getElementById("adoptaddress").value == "")errors+='If your residence will be the cats new home.\n'
if(document.application.firstcat.checked == false)errors+='If this is your first cat.\n'
if(document.application.allergy.checked == false)errors+='If anyone in your household has an allergy to cats.\n'
if(document.application.numberofadults.value == "")errors+='Number of Adults.\n'
if(document.application.household.checked == false)errors+='What kind of household the cat will be living in.\n'
if(document.application.living.checked == false)errors+='What kind of home the cat will be living in.\n'
if(document.application.rent_own.checked == false)errors+='If you rent or own.\n'
if(document.application.declaw.checked == false)errors+='If you plan on declawing the cat.\n'
if(document.application.heartcheck.checked == false)errors+='If HEART can check the place of residence.\n'
if(document.application.responsible.checked == false)errors+='If you will take responsibility for this cat.\n'
if(document.application.certify.checked == false)errors+='Please check the box that you certify this information is true.\n'
  if (errors) alert('The following required fields were left blank:\n'+errors);
  document.returnValue = (errors == ''); }
</SCRIPT>

Re: JS Validation

Posted: Fri Apr 10, 2009 9:15 am
by it2051229
mind showing also your html?

Re: JS Validation

Posted: Fri Apr 10, 2009 9:32 am
by SheDesigns
There's quite a bit, the application is lengthy.

Here's my form tag:

Code: Select all

<form method="post" action="adoption_app_cat.php3#message" name="application" id="application"  onSubmit="validateForm();return document.returnValue">
* The form uses ReCaptcha, so it calls upon itself.

Here's an example of one of the radio buttons I need to verify is checked:

Code: Select all

Is the above address where the adopted cat would be living?
<input type="radio" name="adoptaddress" id="adoptaddress" value="Yes"> Yes
<input type="radio" name="adoptaddress" id="adoptaddress" value="No"> No

Re: JS Validation

Posted: Sun Apr 12, 2009 1:42 am
by it2051229
ok.. there's no easy way on getting the values or which radio button has been checked but I created a simple script that you can read and maybe that you would be able to understand and try to relate it on your current project. Anyways before you try, just copy and paste first my code on an HTML file then try it.. If it's working, then start understanding the source code but if it's not... theennn,..... oopss my bad(anyways, i tested this before posting it here).

Code: Select all

 
<html>
    <script type='text/javascript'>
        function checkMyRadioButtons()
        {
            var message = "";
            
            // we process question 1 first... how?
            var categoryOne = document.getElementById("categoryOne"); // this is from the <div id='categoryOne'>
            
            // we get all the input tags of category one
            var inputTags = categoryOne.getElementsByTagName("input");
            
            // input tags now is an array containing multiple input tags.. so we are expecting 2 input tags here
            // because CATEGORY ONE as you can see, it has two input tags on the form below...
            
            // for each input tags of category one, we check if it is a radio button
            for(i = 0; i < inputTags.length; i++)
            {
                // check if radio button and that if it is checked
                if(inputTags[i].type == "radio" && inputTags[i].checked == true)
                {
                    // then we get the value of the checked input radio button
                    message = inputTags[i].value + " has been selected for question one\n";
                    
                    // then we get out of this loop right away because we already found our answer and there's no
                    // point searching the other input tags because we know that they aren't selected.
                    break;
                }
            }
            
            // then we process question 2.. how?
            var category2 = document.getElementById("categoryTwo"); // this is from the <div id='categoryTwo'>
            
            // we get all the input tags of category two
            inputTags = categoryTwo.getElementsByTagName("input");
            
            // and do the same step as category one
            for(i = 0; i < inputTags.length; i++)
            {
                if(inputTags[i].type == "radio" && inputTags[i].checked == true)
                {
                    message += inputTags[i].value + " has been selected for question two";
                    break;
                }
            }
            
            alert(message);
        }
    </script>
    <form name='application'>
        <div id='categoryOne'>
            Question ONE: Is the above address where the adopted cat would be living? <br />
            <input type='radio' name='firstquestion' value='yes'/> YES <br />
            <input type='radio' name='firstquestion' value='no' /> NO <br />
        </div>
        <br />
        <div id='categoryTwo'>
            Question TWO: Are you gay? <br />
            <input type='radio' name='secondquestion' value='yes'/> YES <br />
            <input type='radio' name='secondquestion' value='no' /> NO <br />
        </div>
        <br />
        <input type='button' onclick='checkMyRadioButtons()' value='test my buttons'/>
    </form>
</html>