jQuery Validation Plugin Checkbox errorPlacement

Question

I have a group of checkboxes that all have the same name. They all have different values. They are just part of a form. They do not make up the entire form. I want the checkboxes to display their error AFTER the last checkbox of that group.

is it possible to do something like this in jQuery?

$("#myform").validate({
  errorPlacement: function(error, element) {
     var checkboxes = $("#checkboxes");
     if(checkboxes.contains(element))
        label.insertAfter(checkboxes[checkboxes.length-1]);
   },
   debug:true
 })

How would I go about doing this?

Thanks,
Ian McCullough

JohnEric · Accepted Answer · 2010-05-14 15:14:36Z

I realize that this is an older question but, I needed similar functionality on a form and solved it.

Using jQuery 1.4.2

So given the following form.

<form id="checkForm" method="get" action="">
<ul id="checkboxes">
    <li><input type="checkbox" name="checkOne" id="checkOne" value="1" /></li>
    <li><input type="checkbox" name="checkTwo" id="checkTwo" value="2" /></li>
    <li><input type="checkbox" name="checkThree" id="checkThree" value="3" /></li>
</ul>
<input class="submit" type="submit" value="Submit"/>

Then you can do the following

$("#checkForm").validate({
    rules: {
        checkOne: "required",
        checkTwo: "required",
        checkThree: "required"
    },
    errorPlacement: function(error, element) {
        if ($("#checkboxes").has(element).size() > 0) {
            error.insertAfter($("#checkboxes input:checkbox:last"));
        } else {
            error.insertAfter(element);
        }
    }
});

Johnny Oshika · Accepted Answer · 2014-03-18 22:06:01Z

1

Here's a generic solution that will work with all checkboxes on the page. It will insert an error message after the last checkbox of the group.

$('form').validate({
    rules: {
        checkbox_group_1: {
            required: true
        },
        checkbox_group_2: {
            required: true,
        }
    },
    errorPlacement: function(error, element) {
        if (element.is(':checkbox'))
            error.insertAfter($('input[name=' + element.attr('name') + ']').last());
        else
            error.insertAfter(element);
    }
});

answered Mar 18, 2014 at 22:06

Johnny Oshika

58k41 gold badges197 silver badges286 bronze badges

2 Comments

mckenna Over a year ago

This example almost works. I just needed to add double quotes before and after the element.attr('name') section. It was trying to find input[name=attribute] instead of input[name="attribute"].

Johnny Oshika Over a year ago

@mckenna Interesting. They should both work (with and without quotations), but I find it interesting that it only worked for you with the quotes.

Daniel · Accepted Answer · 2009-07-06 20:43:44Z

0

Couldn't you just do

if(checkboxes.contains(element)) {
  checkboxes.after(label);
}

answered Jul 6, 2009 at 20:43

Daniel

2,6993 gold badges22 silver badges17 bronze badges

Comments

SolutionYogi · Accepted Answer · 2009-07-06 20:49:57Z

0

What is the variable 'label' doing in your code?

Shouldn't you use the 'error' variable?

error.insertAfter(checkboxes[checkboxes.length-1]);

answered Jul 6, 2009 at 20:49

SolutionYogi

32.4k12 gold badges73 silver badges79 bronze badges

2 Comments

Ian McCullough Over a year ago

this does not seem to work. I recieve no error from the client, but no error message either. Also, the form will not submit.

SolutionYogi Over a year ago

Could you try to create a sample test page on jsbin.com? It will be easier to debug through the problem.

Collectives™ on Stack Overflow

jQuery Validation Plugin Checkbox errorPlacement

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related