Jquery复选框验证

时间:2012-07-13 05:48:49

标签: jquery

我正在尝试使用Jq验证一些复选框,但我不知道我在哪里做错了。

我使用相同的代码来验证其他表单(但不是复选框,并且工作正常。

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

3 个答案:

答案 0 :(得分:1)

您在表单中遗漏了一些不需要的引文,但始终使用它们被认为是好习惯

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

您还在条件语句中使用按位运算符

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

您想要使用条件运算符&amp;&amp;检查所有值是否都为真

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

答案 1 :(得分:1)

您有语法错误。您缺少两个结束花括号和右括号(例如添加

  

}})

到代码的末尾)。你的提交处理程序也没有返回任何内容。另外,作为DRY(不要重复自己)原则的一部分,你不希望有三个不同的函数valG1,valG2,valG3基本上做同样的事情。这段代码有效。

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;
    }
})
        ​

答案 2 :(得分:0)

假设复选框采用以下格式:g1 [],g1 []。 g1 [],g2 [],g2 [],...

你可以试试这个:

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);
    }

});