-1

各グループで少なくとも 1 つのチェックボックスがオンになっているかどうかを確認する新しいルールを現在の jQuery 検証に適用しようとしています。

私が難しいのは、チェックボックスの名前を変更できないことです。

これが私の現在のjQueryです：

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
    $('#docContainer').validate({ // initialize the plugin
        rules: {
            EMAIL: {
                required: true,
                email: true
            },
            FNAME: {
                required: true
            },
            POSTCODE: {
                digits: true,
                minlength: 4
            },
            mark1: {
                required: function(elem)
                {
                    if ($('input[name="group[20349][1]"]:checked').length > 0 ||
                        $('input[name="group[20349][2]"]:checked').length > 0 ||
                        $('input[name="group[20349][3]"]:checked').length > 0)
                    {
                        return true;
                    }
                    return false;
                }
            },
            mark2: {
                required: function(elem)
                {
                    if ($('input[name="group[20353][1]"]:checked').length > 0 ||
                        $('input[name="group[20353][2]"]:checked').length > 0 ||
                        $('input[name="group[20353][3]"]:checked').length > 0)
                    {
                        return true;
                    }
                    return false;
                }
            },
            mark3: { 
                required: function(elem)
                {
                    if ($('input[name="group[20357][1]"]:checked').length > 0 ||
                        $('input[name="group[20357][2]"]:checked').length > 0 ||
                        $('input[name="group[20357][3]"]:checked').length > 0)
                    {
                        return true;
                    }
                    return false;
                }
            }
        },
        messages: {
            FNAME: "<b style='color:#FFFFFF'>Please fill your first name...</b>",
            EMAIL: {
                required: "<b style='color:#FFFFFF'>We need your email address to contact you!</b>",
                email: "<b style='color:#FFFFFF'>Your email address must be in the format of name@domain.com</b>"
            },
            POSTCODE: {
                digits: "<b style='color:#FFFFFF'>Post Code must be numbers only...</b>",
                minlength: "<b style='color:#FFFFFF'>Post Code must be at least 4 digits...</b>"
            },
            mark1: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Type Of Property...</b>",
            mark2: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Bedrooms...</b>",
            mark3: "<b style='color:#FFFFFF'>You must CHECK at least 1 option for Price Range...</b>"
        }
    });
});  
</script>

mark1、mark2、mark3は、各グループのルールに合わせて作成されたフィールドです。内部でわかるように、チェックボックスにはそれぞれ固有の名前が付けられており、それを変更することはできません。

グループ 1 akamark1の構成: group[20349][1], group[20349][2],group[20349][3] グループ 2 akamark2の構成: group[20353][1], group[20353][2],group[20353][3] グループ 3 akamark3の構成: group[20357][1], group[20357][2],group[20357][3]

私の問題は、ルールが機能せず、名前、電子メールに対してトリガーされますが、各グループで何もチェックされていない場合、チェックボックスに対してトリガーされないことです。

どうすればこれを修正できますか?

4

2 に答える 2

-1

各グループに新しい属性を作成することで、ユーザーがフォームを送信しようとしたときに解決できました。

追加された属性はdata-foo="anynameyouwantforyourgroup"

$('#docContainer').submit(function() {
    if ($('[data-foo=property]:checked').size() == 0)
    {
        alert('You must CHECK at least 1 option for group X');
        return false;
    }

    if ($('[data-foo=bedrooms]:checked').size() == 0) {
        alert('You must CHECK at least 1 option for group Y');
        return false;
    }

    if ($('[data-foo=price]:checked').size() == 0) {
        alert('You must CHECK at least 1 option for group Z');
        return false;
    }
    return true;
});
于 2013-07-26T13:15:45.913 に答える