Custom jQuery validation function not firing

Question

I'm trying to use a custom validation function to check if at least one check box is selected. But the validation function is not firing. What am I missing?

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script type="text/javascript" src="../Scripts/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.validate.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.validator.addMethod("fruits", function(value, elem, params) {
                if($(".fruits:checkbox:checked").length > 0){
                    return true;
                }else {
                    return false;
                }
            },"pick at least one plz");

            $("#form1").validate({
                rules:{
                    fruits:{
                        fruits: true
                    }
                },
                submitHandler: function(form) {
                    alert("submitting...");
                    form.submit();
                },
                invalidHandler: function(form){
                    alert("invalid form");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1">
    <input type="checkbox" class="{fruits: true}" name="fruits" id="chkApple" value="1" />Apple<br />
    <input type="checkbox" class="fruits: true}" name="fruits" id="chkBanana" value="2" />Banana<br />
    <input type="submit" value="Submit" />
    </form>
</body>
</html>

I had once problem with the jquery validation plugin. I had to use a bit lower version of jquery for that — Parag
– Parag, Commented Aug 16, 2012 at 5:42
Does this answer your question? Can I use jQuery to check whether at least one checkbox is checked? — mickmackusa
– mickmackusa ♦, Commented Nov 24, 2020 at 23:02

Jonathan de M. · Accepted Answer · 2012-08-16 05:45:03Z

0

try:

$.validator.addMethod("fruits", function(value, elem, params) {
  return $(".fruits").is(":checked")
},"pick at least one plz");

answered Aug 16, 2012 at 5:45

Jonathan de M.

9,8488 gold badges50 silver badges72 bronze badges

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

1 Comment

mickmackusa Over a year ago

This answer is missing its educational explanation.

gaurang171 · Accepted Answer · 2012-08-16 05:47:55Z

0

replace your code with this

if($(".fruits").is(":checked")){

answered Aug 16, 2012 at 5:47

gaurang171

9,1104 gold badges31 silver badges30 bronze badges

1 Comment

mickmackusa Over a year ago

This answer is missing its educational explanation.

Parag · Accepted Answer · 2012-08-16 06:02:26Z

0

check this link source

 $(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[@name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
      alert('One of the  buttons is checked!');
    }
  });
});

answered Aug 16, 2012 at 6:02

Parag

4,8329 gold badges37 silver badges50 bronze badges

1 Comment

mickmackusa Over a year ago

This answer is missing its educational explanation.

Ray Cheng · Accepted Answer · 2012-08-16 06:29:26Z

I got it working. The problem with not firing is caused by a problematic encoding issue. After that's resolved, the custom function is called. But $(".fruits").is(":checked syntax does work for me, it keeps saying nothing is selected. so I went old school with a for loop.

<html>
<head>
    <title></title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.validator.addMethod("fruits", function (value, elem, params) {
                var items = $("input[name^='fruits']");
                for (i = 0; i < items.length; i++) {
                    if ($(items[i]).is(":checked")) {
                        return true;
                    }
                }
                return false;
            }, "pick one plz");

            $("#form1").validate({
                rules: {
                    fruits: {
                        fruits: true
                    }
                },
                submitHandler: function (form) {
                    alert("submitting...");
                    form.submit();
                },
                invalidHandler: function (form) {
                    alert("invalid form");
                }
            });
        });
    </script>
</head>
<form id="form1">
<input type="checkbox" class="{fruits: true}" name="fruits" id="chkApple" value="1" />Apple<br />
<input type="checkbox" class="fruits: true}" name="fruits" id="chkBanana" value="2" />Banana<br />
<input type="submit" value="Submit" />
</form>
<body>
</body>
</html>

Collectives™ on Stack Overflow

Custom jQuery validation function not firing

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related