[JavaScript]: How to define a variable as object type?

Question

I am using following code to check whether a check box on my website page is checked or not. But there are several check boxes and I want to use this same function. I want to call this function from a Submit button click and pass the check box name as argument. It should than validate that check box.

function CheckTermsAcceptance()
{
    try
    {
     if (!document.getElementById('chkStudent').checked)
      alert("You need to accept the terms by checking the box.") 
      return false; 
    }
    catch(err)
    {
     alert(err.description);
    }
}

Answer 1

Just pass a parameter to CheckTermsAcceptance(). You also missed a brace after the alert -- there are two statements in that if block, and you'll always execute the return false without it.

function CheckTermsAcceptance(checkboxName)
{
    try
    {
        if (!document.getElementById(checkboxName).checked) {
                alert("You need to accept the terms by checking the box.")      
                return false;   
        }
    }
    catch(err)
    {
        alert(err.description);
    }
}

To call this from your submit button, have a function like validateForm that's called on submit. Then simply construct a list of the checkboxes and pass in their IDs to CheckTermsAcceptance.

Note that this sort of validation is handled very smoothly by jQuery and its ilk. For example, here's the jQuery validation plugin.

Answer 2

Sorry for not answering your questions. But you should seriously consider using jQuery and jQuery validate.

Answer 3

function CheckTermsAcceptance(element){
    try{
       if (!element.checked){
            alert("You need to accept the terms by checking the box.")      
            return false;   
        }
    }catch(err){
        alert(err.description);
    }
}

and you call it like:

CheckTermsAcceptance(document.getElementById('chkStudent'));

is that it?

Answer 4

this function will work with a bit of fix up, pass argument and make sure you do both the alert and the return false in the if statement

function CheckTermsAcceptance(checkBox) //added argument
{
    try
    {
        if (!checkBox.checked) { //added block to group alert and fail case
            alert("You need to accept the terms by checking the box.")      
            return false;
        }
        return true; //added success case
    }
    catch(err)
    {
        alert(err.description);
    }
}

once you have this in place you can then use it on your form validation like so

<form id="formid" action="" onsubmit="return validate('formid');">
<input type=checkbox name="name" id="name"><label for="name">Name</label>
<input type=checkbox name="name2" id="name2"><label for="name2">Name2</label>
<input type=submit>
</form>
<script>
function validate(formid) {
    var form = document.getElementById(formid);
    for (var i = 0; i < form.elements.length; i++) {
        var elem = form.elements[i];
        if (elem.type == 'checkbox' && !CheckTermsAcceptance(elem)) {
            return false;
        }
    }
    return true;
}
</script>

i can confirm that this works in firefox 3.5

also jQuery and jQuery.validate make this very easy to implement in a very declarative way.

Answer 5

You could also use more arguments to allow for different options as well.

function CheckTermsAcceptance()
{
    var ctrl = arguments[0];
    var valueExpected = arguments[1];
    var outputMessage = arguments[2];
    if(valueExpected == null) valueExpected = true;
    if(outputMessage == null) outputMessage = "You need to accept the terms by checking the box.";

    try
    {
     if(ctrl.checked == valueExpected)
     {
      Log.Message(outputMessage);
     }
    }
    catch(err)
    {
     alert(err.description);    
    }
}