Jquery Checkboxes validation

Question

I am trying to validate some groups of checkboxes using Jq but I don't know where I am doing wrong.

I use the same code to validate other forms (but not checkboxes and is working fine.

form.php

<form id=frm_ch>
<td><input type="checkbox" name="g1" id="h1" value="1" /></td>
<td><input type="checkbox" name="g1" id="d1" value="2" /></td>
<td><input type="checkbox" name="g1" id="a1" value="3" /></td>

<td><input type="checkbox" name="g2" id="h2" value="1" /></td>
<td><input type="checkbox" name="g2" id="d2" value="2" /></td>
<td><input type="checkbox" name="g2" id="a2" value="3" /></td>

<td><input type="checkbox" name="g3" id="h3" value="1" /></td>
<td><input type="checkbox" name="g3" id="d3" value="2" /></td>
<td><input type="checkbox" name="g3" id="a3" value="3" /></td>

validate.js

//global vars
var frm_ch = $("#frm_ch");
var g1 = $("name=g1");
var g2 = $("name=g2");
var g3 = $("name=g3");
var cInfo = $("#cInfo");

frm_ch.submit(function(){
    if(valG1() & valG2() & valG3()){

var g1 = $("name=g1").attr('value');
var g2 = $("name=g2").attr('value');
var g3 = $("name=g3").attr('value');

//validate functions are all the same so I am posting just one:

function valG1(){
    //if it's NOT valid
    if($('input[name=g1]:checked').size() == 0){
        cInfo.text("Please check a Checkbox");
        cInfo.addClass("error");
        return false;
        }
        //if it's valid
        else{
        cInfo.text("");
        cInfo.removeClass("error");
        return true;
    }
}

why you use checkbox and putted same name!!! please use radio instead of checkbox or try change name to g1[] instead of g1 — Hadi
– Hadi, Commented Jul 13, 2012 at 5:54

Decker W Brower · Accepted Answer · 2012-07-13 06:45:03Z

1

You have syntax errors. You are missing two closing curly braces and closing parenthesis (e.g. add

}})

to the end of your code). Also your submit handler is not returning anything. Additionally, as a part of DRY (do not repeat yourself) principle, you don't want to have three different functions valG1, valG2, valG3 that essentially do the same thing. This code works.

var frm_ch = $("#frm_ch");
var g1 = $("name=g1");
var g2 = $("name=g2");
var g3 = $("name=g3");
var cInfo = $("#cInfo");

function valG1() {
    //if it's NOT valid
    if ($('input[name=g1]:checked').size() == 0 || 
        $('input[name=g2]:checked').size() == 0 || 
        $('input[name=g3]:checked').size() == 0) {
        cInfo.text("Please check a Checkbox");
        cInfo.addClass("error");
        return false;
    }
    //if it's valid
    else {
        cInfo.text("");
        cInfo.removeClass("error");
        return true;
    }
}

frm_ch.submit(function() {
    if (valG1()) {

        var g1 = $("name=g1").attr('value');
        var g2 = $("name=g2").attr('value');
        var g3 = $("name=g3").attr('value');
        return true;
    }
    else
    {
        return false;
    }
})

edited Jul 13, 2012 at 6:45

Decker W Brower

9416 silver badges16 bronze badges

answered Jul 13, 2012 at 6:24

ryuusenshi

1,98613 silver badges15 bronze badges

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

2 Comments

Pavlos1316 Over a year ago

"you don't want to have three different functions" but each function checks for different group og check boxes (g1, g2, g3) 'if ($('input[name=g1]:checked')' checks only for g1 group

ryuusenshi Over a year ago

You can pass the name of the group as an argument to the function, i.e. valG(group)

Decker W Brower · Accepted Answer · 2012-07-13 06:18:30Z

1

Your missing some quotations in your form which are not required but it is considered good practice to always use them

    <form id=frm_ch> <-- You have
    <form id="frm_ch"> <-- should be

You are also using bitwise operators in your conditional statement here

    frm_ch.submit(function(){
        if(valG1() & valG2() & valG3()){

You want to use the conditional operator && to check if all the values are true

    frm_ch.submit(function(){
        if(valG1() && valG2() && valG3()){

edited Jul 13, 2012 at 6:18

answered Jul 13, 2012 at 5:57

Decker W Brower

9416 silver badges16 bronze badges

4 Comments

mrsrinivas Over a year ago

I think it won't be a problem

Decker W Brower Over a year ago

@Mr Srinivas Thanks for pointing that out I wasn't aware that the quotations were optional

Pavlos1316 Over a year ago

@DeckerWBrower <form id=frm_ch> is a typing mistake. I will check now the operator

Pavlos1316 Over a year ago

@DeckerWBrower "You want to use the conditional operator && to check if all the values are true" even if for some reason the single & works for my form validation, YES I needed && to work with my checkboxes. ty

Alex Ball · Accepted Answer · 2012-07-13 06:27:44Z

0

Assume that checkbox are in this format: g1[], g1[]. g1[], g2[], g2[], ...

You could try this:

var frm_ch = $("#frm_ch");

frm_ch.submit(function(){

    for(var i = 1; i <= 3; i++){
        var $ch = $.each($("input[name='g"+i+"[]']:checked"), function() {
               var $this = $(this);
               return $this;
        });
        if(!$ch.val()) alert('check checkbox group n: '+i);
    }

});

answered Jul 13, 2012 at 6:27

Alex Ball

4,4842 gold badges20 silver badges23 bronze badges

Collectives™ on Stack Overflow

Jquery Checkboxes validation

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related