Validating Checkboxes in javascript

Question

Hi am new to Javascript and don't know how to validate my check-boxes I have looked up many examples but still don't understand it can someone please tell me how to validate it and also my drop down menu inst validating at all any help in advance will be appreciated.

My Java Script and HTML

function validateForm(){

    var fname, lname, sex, address, email, length, songs, a, i, check, error;

    a=0;
    check=false;
    error=false;

    fname=document.getElementById("firstname").value;
    lname=document.getElementById("lastname").value;

    sex=document.getElementsByName("sex");

    address=document.getElementById("address").value;
    email=document.getElementById("email").value;
    length=document.getElementById("len").value;

//  songs=document.getElementByName("f_song");

    if(fname=="" || fname==null){

        alert("please input a first name");
        error=true;
        return false;
    }

    if(lname=="" || lname==null){

        alert("please input your last name");
        error=true;
        return false;
    }

    for(i=0; i<sex.length; i++){

        if(sex.item(i).checked==false){

                a++;
        }
    }

    if(a==sex.length){

            alert("Please select Male or Female");
            error=true;
            return false;

    }

    if(address=="" || address==null){

        alert("Please input your address thanks");
        error=true;
        return false;


    }

    if(email=="" || email==null){

        alert("Please enter a email address");
        error=true;
        return false;
    }

    if(length=="" || length==null){

        alert("Be select how long have you been a fan");
        error=true;
        return false;
    }






    alert("Am working ");

}


MY HTML


<head>
<title>] </title>
<link rel="stylesheet" type="Text/css" href="wit_frm.css"/>

<script type="text/javascript" src="java.js">

    </script>
</head>

<body>

    <div id="container">

        <div id="header">

        </div>

        <div id="topnav">

            <div id="link">
                <a href="wit.html">Home</a>
                <a href="http://www.whitneyhouston.com">Fan Site</a>
                <a href="wit_form.html">Register</a>
            </div>

        </div>



        <div id="contentarea">

            <form method="post" action="" onsubmit= "return validateForm();">

            <fieldset>
            <legend>Personal Information</legend>

            First Name:<input type="text" name="fname" id="firstname"/>
            <br/>
            <br/> Last Name:<input type="text" name="lname" id="lastname"/>
            <br/>
            <br/> Sex:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  <input type="radio" name="sex" id="m"/>Male  <input type="radio" name="sex" id="f"/>Female
            <br/>
            <br/>Address:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<textarea id="address" name="add" rows="4" cols="30"></textarea>

            </fieldset>

            <fieldset>
            <legend> User Information</legend>
            <br/>Email: &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp; <input type="text" name="e_address" id="email"/>
            <br/>
            <br/>No of years listening  to her music: <select name="n_years" id="len">
                                                <option value="less than a yr"> less than 1yr</option>
                                                <option value="2-5 years">2-5 years</option>
                                                <option value="5+ years">5+ years</option>
                                                </select>
            <br/>                                   
            <br/>Favorite Songs:I will always love you<input type="checkbox" name="f_song" value="I will always love you"/> I look to you<input type="checkbox" name="f_song" value="I look to you"/></p>  
                            <br/> &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  I have nothing<input type="checkbox" name="f_song" value="I have nothing"/> One moment in time<input type="checkbox" name="f_song" value="one moment in time"/></p>
                            <br/>&nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; I wanna dance with somebody<input type="checkbox" name="f_song" value="I wanna dance with somebody"/> Greatest Love of All<input type="checkbox" name="f_song" value="Greatest love of all"/></p>

            </fieldset>
            <br/><input type="submit" name="sub_button" value="SUBMIT"/> &nbsp;  &nbsp;  &nbsp; <input type="reset" name="res_button" value="CLEAR"/>

            </form>



        </div>

        <div id="footerfix">

        </div>

        <div id="footer">
             <div id="link_1">
                <a href="wit.html">Home</a>
                <a href="">Fan Site</a>
                <a href="">About Her</a>
            </div>
        </div>

    </div>




</body>
</html>

Oh wow look at all those repetition throughout the code. And also you might want to remove that XML declaration. — Derek 朕會功夫
– Derek 朕會功夫, Commented Apr 19, 2014 at 21:45

user3546438 · Accepted Answer · 2014-04-19 22:18:30Z

1

I would do it like this:

Bin example

var f_song = document.getElementsByName("f_song");
var oneSongSelected = 0;
//Loop through the checkbox elements, and tally the selected
for(var ss = 0; ss < f_song.length; ss++){
  if(f_song[ss].checked){
    oneSongSelected++;
  }
}
//If none are selected, then alert your error, and return false
if(oneSongSelected === 0){
  alert("Please select at least one song");
  return false;
}

edited Apr 19, 2014 at 22:18

answered Apr 19, 2014 at 22:07

user3546438

1113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guilherme Natal de Mello · Accepted Answer · 2014-04-19 22:10:53Z

0

You could use jquery, but you can do something like this:

In your html code, you can use the first dropdown option "Select" and value "-1":

<select id="dropDown">
    <option value="-1">Select</option>
</select>

CheckBox:

<input type="checkbox" name="checkbox" id="checkbox"  />

DropDown JavaScript:

var aValue;
aValue = document.getElementById("dropDown").value;

if(aValue == "-1"){
    return false;
}

CheckBox JavaScript:

var checkbox = document.getElementById('checkbox');

if(!checkbox.checked){
    return false;
}

edited Apr 19, 2014 at 22:10

answered Apr 19, 2014 at 22:02

Guilherme Natal de Mello

4274 silver badges16 bronze badges

Comments

Sumner Evans · Accepted Answer · 2014-04-19 22:39:46Z

0

as you are new in JavaScript, I recommend that you to learn jQuery, it's easier and simpler than JavaScript. If you have checkboxes and you want to validate them, you can try this:

$('#checkbox').click(function(){
    if (this.checked) {

    }
});

Explanation of Code

$('#checkbox').click(function() => this line says "when the element with id of #checkbox is clicked, do the stuff inside this function." You will need to replace #checkbox with the id of your checkbox (example: #yourCheck) or its class (example: .yourClass).

if (this.checked) => this if statement checks to see if the element is checked or not. You should include your code for when the checkbox is checked inside of the brackets.

EDIT: Here is a JSFiddle example that I made.

edited Apr 19, 2014 at 22:39

Sumner Evans

9,2055 gold badges32 silver badges48 bronze badges

answered Apr 19, 2014 at 21:51

nick

3,3076 gold badges44 silver badges85 bronze badges

Collectives™ on Stack Overflow

Validating Checkboxes in javascript

3 Answers 3

Comments

Comments

Explanation of Code

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Explanation of Code

Comments

Your Answer

Sign up or log in

Post as a guest

Related